使用Google商家信息时，我是否可以将搜索范围限制在城市的街道上 Autocomplete？
使用Google商家信息时，我是否可以将搜索范围限制在城市的街道上 Autocomplete？
你可以设置 Autocomplete 使用的选项 geocode 作为类型，它将限制返回到地址的结果：
var input = document.getElementById( 'searchTextField' );
var options = {
bounds: yourBounds,
types: ['geocode']
};
autocomplete = new google.maps.places.Autocomplete( input, options );
没有办法将结果限制为 只是 街道，但这将在很大程度上实现你想要的。如果你设置 yourBounds 正确的，可能仅限于一个城市的区域，它会让你尽可能接近。
更新回复评论：
如果您想从进入城市开始，您可以将地图的边界绑定到 Autocompletes bounds，当地图被选中时，地图会自动设置其视口 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文档。
只是一个html代码示例（twitter bootstrap 3兼容:)）
<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>
DEMO： 的jsfiddle
将类型设置为 地区。
var input = document.getElementById( 'searchTextField' );
var options = {
bounds: yourBounds,
types: ['(regions)']
};
autocomplete = new google.maps.places.Autocomplete( input, options );
希望能帮助到你..
我一直在寻找一种方法来限制地方自动填充功能 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);
});