有没有办法限制 Google Places Autocomplete 搜索城市的街道？

Posted 2023-02-23

【中文标题】有没有办法限制 Google Places Autocomplete 搜索城市的街道？

【英文标题】：Is there a way to restrict the Google Places Autocomplete to search a city's streets?

【发布时间】：2012-05-26 01:13:45

【问题描述】：

在使用 Google 地方信息Autocomplete 时，我可以将搜索限制在城市的街道上吗？

【问题讨论】：

通过将城市名称附加到地址？

【参考方案1】：

您可以将Autocomplete 选项设置为使用geocode 作为类型，这将限制返回到地址的结果：

var input = document.getElementById( 'searchTextField' );
var options = 
  bounds: yourBounds,
  types: ['geocode']
;

autocomplete = new google.maps.places.Autocomplete( input, options );

没有办法将结果限制为仅条街道，但这将在很大程度上实现您想要的。如果您正确设置yourBounds，可能仅限于一个城市的区域，它将让您尽可能接近。

更新回复评论：

如果您想从输入城市开始，您可以将地图的边界绑定到Autocompletes 边界，当在Autocomplete 中选择城市时，地图会自动设置其视口：

var options = 
  bounds: yourBounds,
  types: ['(cities)']
;
autocomplete =
    new google.maps.places.Autocomplete( input, options );
// This will bind the map's bounds to the Autocomplete's bounds:
autocomplete.bindTo('bounds', map);

然后，您可以更新Autocomplete 的类型，类似于上面，让它返回地址：

autocomplete.setTypes( [ "geocode" ] );

从那里，您可以阅读Places Library API Docs。

【讨论】：

好的，但是在谷歌地图上，如果我搜索“纽约”，我会得到一张带有分隔城市的地图。是不是不可能得到那些界限？感谢您的帮助

我已根据您的评论更新了我的回答内容。

谢谢，正是我想要的。

很好的答案，虽然我认为城市的类型选项应该是 ['(cities)']。

是的，我忘了加上括号；我已将代码示例更新为正确。谢谢 -

【参考方案2】：

我一直在寻找一种将地点自动完成功能限制为 street_number 级别的方法，但没有找到。

我能想到的最佳解决方案是检查位置结果中的 street_number 组件，如果丢失，则向用户显示通知。

示例代码：

var searchbox = document.getElementById('location');

var options =              
    types: ['geocode']
;

autocomplete = new google.maps.places.Autocomplete(searchbox, options);

google.maps.event.addListener(autocomplete, 'place_changed', function() 
        var place = autocomplete.getPlace();

        var foundStreet = false;

        for (var i = 0; i < place.address_components.length; i++) 
            var c = place.address_components[i];

            for (var j = 0; j < c.types.length; j++) 
            
                if (c.types[j] == "street_number")
                
                    foundStreet = true;
                    break;
                
            

            if (foundStreet)
                break;
        

        if (!foundStreet)
            alert("Not a valid street number, add some pretty message to the user.");

        console.log(place);
    );

【参考方案3】：

只是一个 html 代码示例（twitter bootstrap 3 compatible :)）

<div class="well container">
    <form role="form">
      <div class="form-group">
        <label for="locality" class="sr-only">Stadt oder PLZ</label>
          <input type="text" class="form-control" id="locality" name="locality" placeholder="Stadt oder PLZ" />
          <p class="help-block">Bitte zuerst die Stadt oder PLZ eingeben.</p>
      </div>
      <div class="form-group">
        <label for="route" class="sr-only">Straße / Hausnummer</label>
        <div class="row">
          <div class="col-xs-6">
            <input type="text" class="form-control col-xs-8" id="route" name="route" placeholder="Straße" disabled="true" />
          </div>
          <div class="col-xs-6">
            <input type="text" class="form-control col-xs-4" id="street_number" name="street_number" placeholder="Nr." disabled="true" />
          </div>
        </div>
      </div>
    </form>
</div>

我认为代码是不言自明的，请尝试一下

<script>
var localityInput = document.getElementById('locality');
var localityOptions = 
  types: ['geocode'], //['(cities)'], geocode to allow postal_code if you only want to allow cities then change this attribute
  componentRestrictions: country: 'de'
;
autocomplete = new google.maps.places.Autocomplete(localityInput, localityOptions);

google.maps.event.addListener(autocomplete, 'place_changed', function() 
    $('#route').attr('disabled', false).focus();
    $('#street_number').attr('disabled', false);

    var boundsByCity = autocomplete.getPlace().geometry.viewport;
    var routeInput = document.getElementById('route');
    var routeOptions = 
        bounds: boundsByCity,
        types: ['geocode']
    ;
    new google.maps.places.Autocomplete(routeInput, routeOptions);
);
</script>

演示：JSFIDDLE

Another demo more advanced

【参考方案4】：

将类型设置为区域。

var input = document.getElementById( 'searchTextField' );

var options = 
  bounds: yourBounds,
  types: ['(regions)']
;

autocomplete = new google.maps.places.Autocomplete( input, options );

希望对你有帮助..