Javascript 将地理代码自动完成限制为一个国家_Javascript_Geolocation_Geocoding_Google Geocoder

Javascript 将地理代码自动完成限制为一个国家

javascript geolocation

Javascript 将地理代码自动完成限制为一个国家,javascript,geolocation,geocoding,google-geocoder,Javascript,Geolocation,Geocoding,Google Geocoder,我需要谷歌的地方自动完成API的帮助。我从API中获取自动完成地址和lat和long。没有国家限制，代码运行良好，我得到了所需的地址，lat和long。然而，当我尝试添加国家/地区限制时，lat和long未能随我的表格一起发送以下是不受国家/地区限制的工作代码： JS 我的表格： <html> <head> <title>Address Demo</title> </head> <body> <form actio

我需要谷歌的地方自动完成API的帮助。我从API中获取自动完成地址和lat和long。没有国家限制，代码运行良好，我得到了所需的地址，lat和long。然而，当我尝试添加国家/地区限制时，lat和long未能随我的表格一起发送

以下是不受国家/地区限制的工作代码：

我的表格：

<html>
<head>
<title>Address Demo</title>
 </head>
<body>
<form action="address.php" method="GET">

<div class="container">
<div class="panel panel-primary">
<div class="panel-heading" style="background-color:#00CDCD">
<h2 class="panel-title">Address</h2>
</div>
<div class="panel-body">
<input name="address" id="searchTextField" placeholder="Enter area name" type="text" class="form-control" required>
<input type="hidden" name="latii" id="latitude">
<input type="hidden" name="lngii" id="longitude">
<input type="submit" name="submit" value="SUBMIT" class="bookingbtn top-10 bottom-20">                                                            
</div>
</div>
</form>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

</body>
</html>


地址演示
地址

address.php

<?php

$address = $_GET['address'];
$latii = $_GET['latii'];
$lngii = $_GET['lngii'];

echo "$address </br>";
echo "$latii </br>";
echo "$lngii";

?>

提前谢谢你的帮助。

我终于让它开始工作了。多亏了这里的答案

我的工作代码是：

<script>
        function initialize() {
    var options = {
  types: ['geocode'],
  componentRestrictions: {country: "us"}
 };
          var input = document.getElementById('searchTextField');
          var autocomplete = new google.maps.places.Autocomplete(input, options);
            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                var place = autocomplete.getPlace();
                document.getElementById('searchTextField').value = place.name;
                document.getElementById('latitude').value = place.geometry.location.lat();
                document.getElementById('longitude').value = place.geometry.location.lng();
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>


函数初始化（）{
变量选项={
类型：['geocode']，
组件限制：{国家：“美国”}
};
var input=document.getElementById（'searchTextField'）；
var autocomplete=new google.maps.places.autocomplete（输入，选项）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
var place=autocomplete.getPlace（）；
document.getElementById（'searchTextField'）。value=place.name；
document.getElementById（'latitude'）。value=place.geometry.location.lat（）；
document.getElementById（'longitude'）。value=place.geometry.location.lng（）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

我们应该如何重现该问题？什么输入不起作用？为什么会失败？你会犯什么错误？你试过调试什么？请提供一个。我没有收到任何错误。只是在提交表单时不包括latii和lngii值。但当我在没有国家限制的情况下尝试时，它被提交了。我肯定做了一些错误的事情document.getElementById（'latitude'）.value=place.geometry.location.lat（）；document.getElementById（'longitude'）。value=place.geometry.location.lng（）；应该填充这些字段。它在没有国家限制的情况下填充它们lat和long未能随我的表格一起发送-什么表格？我在你共享的代码中看不到任何形式。你从API中得到了什么结果？你查过了吗？？无论如何我不会在这里发表评论/回复，直到你提供一个最小的、完整的、可复制的阅读。我已经更新了我的问题。如果我遗漏了什么，请检查并告诉我。谢谢

<html>
<head>
<title>Address Demo</title>
 </head>
<body>
<form action="address.php" method="GET">

<div class="container">
<div class="panel panel-primary">
<div class="panel-heading" style="background-color:#00CDCD">
<h2 class="panel-title">Address</h2>
</div>
<div class="panel-body">
<input name="address" id="searchTextField" placeholder="Enter area name" type="text" class="form-control" required>
<input type="hidden" name="latii" id="latitude">
<input type="hidden" name="lngii" id="longitude">
<input type="submit" name="submit" value="SUBMIT" class="bookingbtn top-10 bottom-20">                                                            
</div>
</div>
</form>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

</body>
</html>

<?php

$address = $_GET['address'];
$latii = $_GET['latii'];
$lngii = $_GET['lngii'];

echo "$address </br>";
echo "$latii </br>";
echo "$lngii";

?>

<script>
        function initialize() {
    var options = {
  types: ['geocode'],
  componentRestrictions: {country: "us"}
 };
          var input = document.getElementById('searchTextField');
          var autocomplete = new google.maps.places.Autocomplete(input, options);
            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                var place = autocomplete.getPlace();
                document.getElementById('searchTextField').value = place.name;
                document.getElementById('latitude').value = place.geometry.location.lat();
                document.getElementById('longitude').value = place.geometry.location.lng();
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>