将 google 自动填充位置限制在特定城市

Question

我正在使用 google 的自动填充地址 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>

Answer 1

据我所知，目前google API不支持城市名绑定。因此，您要么使用经度和纬度来设置边界，要么使用您选择的城市周围的区域 (f.e.obj.geometry.viewport).

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

另外，我编写代码的方式是，只有在第一个字段中做出选择后，第二个字段的自动完成功能才会打开。更好的方法是让第二个字段只显示第一个字段被选中，但这是你应该自己做的事情。此外，还有一个潜在的错误与自动完成如何存储先前选择的值有关，如果您希望代码 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>

将 google 自动填充位置限制在特定城市

Limit google autofill location to a particular city

html

javascript

api

autofill