【发布时间】:2015-06-01 22:42:38
【问题描述】:
有谁知道限制 Google Places API 只返回完整地址结果的方法 - 即具有地址前两行的结果。 我想去掉城镇,因为它们太宽了。
我看到 postcodeanywhere 只提供完整地址,但它们没有免费层。
谢谢。
【问题讨论】:
-
嘿@paul,你找到限制它的方法了吗?
标签: google-maps google-places-api
有谁知道限制 Google Places API 只返回完整地址结果的方法 - 即具有地址前两行的结果。 我想去掉城镇,因为它们太宽了。
我看到 postcodeanywhere 只提供完整地址,但它们没有免费层。
谢谢。
【问题讨论】:
标签: google-maps google-places-api
您已选择要从 AUTOCOMPLETE 返回的参数,即您的实例中的 street_number 和 route。
基本用法位于这里Google Maps JavaScript API。
请记住以下几点;您的输入字段必须根据自动完成参数命名才能开箱即用,例如 street_number、route、postal_code 等,否则 API 不会写入表单内的这些字段。
我包含的小提琴中的示例 JS:
var placeSearch;
var componentForm = {
street_number: 'long_name',
route: 'long_name'
};
var mapOptions = {
center: new google.maps.LatLng(41.877461, -87.638085),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
disableDefaultUI: true,
streetViewControl: false,
panControl: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var input = /** @type {HTMLInputElement} */
(
document.getElementById('field_autocomplete'));
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
google.maps.event.addListener(autocomplete, 'place_changed', function () {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(12); // Why 17? Because it looks good.
}
marker.setIcon( /** @type {google.maps.Icon} */ ({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(25, 34),
scaledSize: new google.maps.Size(50, 50)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')].join(' ');
}
infowindow.setContent('<div id="infowindow"><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
google.maps.event.addListener(autocomplete, 'place_changed', function () {
fillInAddress();
});
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
});
}
}
var componentForm 用于指定要从 API 检索的自动完成组件。
【讨论】: