Google 地图:在动态标记上居中地图
Google Maps: Centering Map on Dynamic Markers
我试图确保地图以动态添加的标记为中心。标记本身完美地添加到地图中,但地图始终以太平洋中部为中心。我不认为以正确的顺序启动边界。
这是我的地图代码:
<script>
var map, bounds, locations, markers;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
});
google.maps.event.addListenerOnce(map, 'idle', function() {
bounds = new google.maps.LatLngBounds();
loadAllProperties();
});
}
function loadAllProperties() {
$.post("/wp-admin/admin-ajax.php", {action: 'get_all_properties'}, function(result) {
locations = JSON.parse(result);
createMarkers();
});
}
function createMarkers() {
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
bounds.extend(location);
});
map.fitBounds(bounds);
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
</script>
您在扩展边界之前返回标记...因此边界始终为空。重新排序代码以首先扩展边界。
function createMarkers() {
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
markers = locations.map(function(location, i) {
bounds.extend(location);
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
map.fitBounds(bounds);
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
我试图确保地图以动态添加的标记为中心。标记本身完美地添加到地图中,但地图始终以太平洋中部为中心。我不认为以正确的顺序启动边界。
这是我的地图代码:
<script>
var map, bounds, locations, markers;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
});
google.maps.event.addListenerOnce(map, 'idle', function() {
bounds = new google.maps.LatLngBounds();
loadAllProperties();
});
}
function loadAllProperties() {
$.post("/wp-admin/admin-ajax.php", {action: 'get_all_properties'}, function(result) {
locations = JSON.parse(result);
createMarkers();
});
}
function createMarkers() {
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
bounds.extend(location);
});
map.fitBounds(bounds);
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
</script>
您在扩展边界之前返回标记...因此边界始终为空。重新排序代码以首先扩展边界。
function createMarkers() {
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
markers = locations.map(function(location, i) {
bounds.extend(location);
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
map.fitBounds(bounds);
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}