将 google 地图 api 搜索的范围限制在一个区域
limit the bounds for google maps api search to only one area
我想将 google 地图的搜索结果限制在特定的 latLngBounds 范围内。
places search api - 列出此 addListener 函数以更改边界:
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
我将其替换为:
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
searchBox.setBounds(defaultBounds);
不过好像不行。
任何人都可以指出正确的方向,以将搜索结果限制在默认范围内,而不管当前地图视点如何?
这是我基于 API 的当前代码:
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(30.9128292, -98.8563538),
new google.maps.LatLng(30.0964251, -97.9431152));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// [END region_getplaces]
searchBox.setBounds(defaultBounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
这不是“更改”边界,而是在边界更改时收听:
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
将{bound : new LatLngBounds.... }
传递给:
new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));
像这样
拥有您的边界对象:
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
传递给构造函数:
new google.maps.places.SearchBox(input, {bounds: defaultBounds});
的参考资料
我想将 google 地图的搜索结果限制在特定的 latLngBounds 范围内。
places search api - 列出此 addListener 函数以更改边界:
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
我将其替换为:
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
searchBox.setBounds(defaultBounds);
不过好像不行。 任何人都可以指出正确的方向,以将搜索结果限制在默认范围内,而不管当前地图视点如何?
这是我基于 API 的当前代码:
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(30.9128292, -98.8563538),
new google.maps.LatLng(30.0964251, -97.9431152));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// [END region_getplaces]
searchBox.setBounds(defaultBounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
这不是“更改”边界,而是在边界更改时收听:
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
将{bound : new LatLngBounds.... }
传递给:
new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));
像这样
拥有您的边界对象:
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
传递给构造函数:
new google.maps.places.SearchBox(input, {bounds: defaultBounds});
的参考资料