将地理编码自动完成限制在一个国家/地区答案

【问题标题】：Restrict geocode autocomplete to a contry将地理编码自动完成限制在一个国家/地区
【发布时间】：2020-02-14 12:21:18
【问题描述】：

我需要有关 google 地方自动完成 API 的帮助。我从 API 获取自动完成地址和纬度和经度。不受国家/地区限制，代码可以正常工作，我得到所需的地址，经纬度。但是，当我尝试添加国家/地区限制时，经纬度无法与我的表格一起发送。

这是没有国家限制的工作代码：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"></script>
    <script>
        function initialize() {
          var input = document.getElementById('searchTextField');
          var autocomplete = new google.maps.places.Autocomplete(input);
            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>

这是我需要帮助的国家限制代码：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"></script>
    <script>
        function initialize() {

        autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */(document.getElementById('searchTextField')),
    {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>

这是导致问题的行：

autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */(document.getElementById('searchTextField')),
    {types: ['geocode'],
    componentRestrictions: {country: 'us'}});

我的表格：

<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

<?php

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

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

?>

提前感谢您的帮助。

【问题讨论】：

我们应该如何重现这个问题？什么输入不起作用？为什么它失败？你得到什么错误？你试图调试什么？请提供minimal reproducible example。
我没有收到任何错误。只是提交表单时不包含 latii 和 lngii 值。但是当我在没有国家限制的情况下尝试它时，它被提交了。我肯定做错了什么
document.getElementById('latitude').value = place.geometry.location.lat(); document.getElementById('longitude').value = place.geometry.location.lng();应该填充这些字段。它在没有国家限制的情况下填充它们
lat 和 long 无法与我的表格一起发送 - 什么表格？我在您共享的代码中看不到任何形式。您从 API 中得到什么结果？你检查了吗？无论如何...在您提供minimal reproducible example、阅读minimal、complete和reproducible之前，我不会在这里评论/回复。跨度>
我已经更新了我的问题。如果我遗漏了什么，请检查并告诉我。谢谢

标签： javascript geolocation geocoding google-geocoder

【解决方案1】：

我终于让它工作了。感谢这里的答案How to limit google autocomplete results to City and Country only。

我的工作代码是：

<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>

【讨论】：