将谷歌自动填充位置限制为特定城市答案

【问题标题】：Limit google autofill location to a particular city将谷歌自动填充位置限制为特定城市
【发布时间】：2015-10-10 17:10:24
【问题描述】：

我正在使用谷歌的自动填充地址 API 来填充位置，但我想要的是在填充城市之后，地址文本框应该只显示该城市的地址建议，而不是所有地址。下面是城市和地址的html代码

 <div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base City</label>
<div class="col-md-3">
<input type="text" id="loca" name="City" class="form-control"  >
</div>
</div>
 <div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base Location</label>
<div class="col-md-3">
<input type="text" id="locb" name="Location" class="form-control"  >
</div>
</div>

google api 地址建议脚本

   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
    <script>
        var autocomplete = new google.maps.places.Autocomplete($("#loc")[0], {});

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            console.log(place.address_components);
        });
    </script>

【问题讨论】：

标签： javascript html api autofill

【解决方案1】：

据我所知，目前，google API 不支持绑定城市名称。因此，您应该使用经度和纬度来设置边界或您选择的城市周围的区域（例如 obj.geometry.viewport）。

Viewpoint 不仅会返回来自您选择的城市的街道，还会返回来自周围城市的街道，例如，如果您选择纽约市，它将返回来自纽约市和布鲁克林的结果。因此，在我建议的代码中，自动完成会建议您来自两个相邻城市的结果，但稍后的代码将解析用户的选择并确保城市匹配，如果城市不匹配，它将两个字段都设置为空字符串。

另外，我编写代码的方式是，只有在第一个字段中做出选择后，才会打开第二个字段的自动完成功能。更好的方法是让第二个字段出现，只选择第一个字段，但这是你应该自己做的事情。此外，存在与自动完成存储先前选择的值的方式有关的潜在错误，如果您希望代码 100% 正常运行，您可能想要清除自动完成功能的现金或字段本身而不是 $("#locb").val ('');

var autocompleteA = new google.maps.places.Autocomplete($("#loca")[0], { types: ['(cities)'] });
        google.maps.event.addListener(autocompleteA, 'place_changed', function () {
            var placeA = autocompleteA.getPlace();
            var boundsByViewport = autocompleteA.getPlace().geometry.viewport;
            var autocompleteB = new google.maps.places.Autocomplete($("#locb")[0], {
                bounds: boundsByViewport,
                types: ['address']
            });
            google.maps.event.addListener(autocompleteB, 'place_changed', function () {
                var placeB = autocompleteB.getPlace();
                var match = false;
                for (var i = 0; i < placeB.address_components.length; i++) {
                    if ((placeA.address_components[0]).long_name === (placeB.address_components[i].long_name)) {
                        { //"The city names matched"
                            //do what you need with it
                            alert("City is the same");
                            match = true;
                            break;
                        }
                    }
                }
                if (!match) {       //warn that it is not the right adress
                    alert("The city names didn't match.");
                  
                    //clear value of the Location field
                    $("#loca").val('');
                    $("#locb").val('');
                }
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>

<body>
    <div class="form-group">
        <label class="col-md-3 control-label" for="example-text-input">Base City</label>
        <div class="col-md-3">
            <input type="text" id="loca" name="City" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-3 control-label" for="example-text-input">Base Location</label>
        <div class="col-md-3">
            <input type="text" id="locb" name="Location" class="form-control">
        </div>
    </div>
  </body>

【讨论】：