javascript Maps Api V3：getCenter() 和 getZoom() 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13434750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-26 18:45:56 来源:igfitidea点击:
Maps Api V3: getCenter() and getZoom() not working
提问by tomburger
In the Google Maps API V3, I've created a map object:
在 Google Maps API V3 中，我创建了一个地图对象：
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
I will zoom in and pan on that map and to go back to the original view later, I'd like to save the zoom level and the center of the map. I try the following:
我将放大并平移该地图，稍后返回原始视图，我想保存缩放级别和地图的中心。我尝试以下操作：
oldCenter = map.getCenter();
oldZoom = map.getZoom();
But the variables stay 'undefined'. When I do the same thing in the console, I get the correct responses.
但变量保持“未定义”。当我在控制台中做同样的事情时，我得到了正确的响应。
What am I doing wrong? Please let me know if more code is needed to find the answer or if it's an obvious problem.
我究竟做错了什么？如果需要更多代码才能找到答案，或者这是一个明显的问题，请告诉我。
Thanks!
谢谢！
Full Code:
完整代码：
function initialize() {
// CUSTOM PLACES
var latlng = new google.maps.LatLng(51, 10);
var germany = new google.maps.LatLng(51, 10);
var myLatlng = new google.maps.LatLng(49,12);
// DEFINE STYLE
var styles = [
{
"stylers": [
{ "invert_lightness": true }
]
}
];
// MARKER STYLES
var coin_image = 'coin.png';
var merch_image = 'merch.png';
// DEFINE OPTIONS FOR MAP
var myOptions = {
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// CREATE MAP OBJECT
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
map.setOptions({styles: styles});
// select zoom, etc by defining 2 points
var southWest = new google.maps.LatLng(45,-10);
var northEast = new google.maps.LatLng(55,15);
var bounds = new google.maps.LatLngBounds(southWest,northEast);
map.fitBounds(bounds);
placeMarker(southWest);
placeMarker(northEast);
// Place Random Markers
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 50; i++) {
var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
var marker = new google.maps.Marker({
position: location,
map: map,
icon: merch_image
});
var j = i + 1;
marker.setTitle(j.toString());
}
// TRANSACTION MARKERS
// ONE FULL CYCLE
// set marker
var trans_marker = new google.maps.LatLng(52.31799,13.241904);
var marker = new google.maps.Marker({
position: trans_marker,
map: map,
animation: google.maps.Animation.DROP,
title:"Hello World!",
icon: coin_image
});
// HERE'S THE PROBLEM
// var oldCenter = map.getCenter();
// var oldZoom = map.getZoom();
console.log(map);
oldMap = map;
console.log(oldMap);
// console.log(oldZoom);
// console.log(oldCenter.toString());
// pan to marker
setTimeout(function() {map.panTo(trans_marker)}, startDelayed(3000));
// zoom in on marker
setTimeout(function() {zoomIn(ENDZOOM)}, startDelayed(1000));
// show info window
var contentString = "<h3>D?ner @ Coco Banh</h3>";
contentString += ("<p>SumUp was used to pay for a D?ner at Coco Banh in Berlin, Germany</p>");
var infowindow = new google.maps.InfoWindow({
content: contentString
});
setTimeout(function() {infowindow.open(map,marker)}, startDelayed(8000));
setTimeout(function() {infowindow.close()}, startDelayed(5000));
// zoom out again
setTimeout(function() {zoomOut(oldZoom)}, startDelayed(2000));
// center again
setTimeout(function() {map.panTo(oldCenter)}, startDelayed(8000));
}
infowindow = new google.maps.InfoWindow({
content: contentString
});
}
回答by geocodezip
The problem is that the bounds and center are not set yet. To get them you need to do it in a listener on zoom_changed (for zoom); center_changed (for center). Available Map events are listed in the documentation, under events. You can use the addListenerOnceto only do it once (the first time).
问题是边界和中心尚未设置。要获得它们，您需要在 zoom_changed 上的侦听器中执行此操作（用于缩放）；center_changed（用于中心）。可用的地图事件在文档中的事件下列出。您可以使用addListenerOnce只执行一次（第一次）。
Something like this will work:
像这样的事情会起作用：
var oldZoom = null;
var oldCenter = null;
google.maps.event.addListenerOnce(map, "zoom_changed", function() { oldZoom = map.getZoom(); });
google.maps.event.addListenerOnce(map, "center_changed", function() { oldCenter = map.getCenter(); });
You won't be able to use them until after those events have fired.
在这些事件触发之前，您将无法使用它们。
code snippet:
代码片段：
var map;
var ENDZOOM = 0;
function initialize() {
// CUSTOM PLACES
var latlng = new google.maps.LatLng(51, 10);
var germany = new google.maps.LatLng(51, 10);
var myLatlng = new google.maps.LatLng(49, 12);
// DEFINE STYLE
var styles = [{
"stylers": [{
"invert_lightness": true
}]
}];
// MARKER STYLES
var coin_image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
var merch_image = 'http://maps.google.com/mapfiles/ms/micons/yellow.png';
// DEFINE OPTIONS FOR MAP
var myOptions = {
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// CREATE MAP OBJECT
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
map.setOptions({
styles: styles
});
// select zoom, etc by defining 2 points
var southWest = new google.maps.LatLng(45, -10);
var northEast = new google.maps.LatLng(55, 15);
var bounds = new google.maps.LatLngBounds(southWest, northEast);
map.fitBounds(bounds);
placeMarker(southWest);
placeMarker(northEast);
// Place Random Markers
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 50; i++) {
var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
var marker = new google.maps.Marker({
position: location,
map: map,
icon: merch_image
});
var j = i + 1;
marker.setTitle(j.toString());
}
// TRANSACTION MARKERS
// ONE FULL CYCLE
// set marker
var trans_marker = new google.maps.LatLng(52.31799, 13.241904);
var marker = new google.maps.Marker({
position: trans_marker,
map: map,
animation: google.maps.Animation.DROP,
title: "Hello World!",
icon: coin_image
});
var oldZoom = null;
var oldCenter = null;
google.maps.event.addListenerOnce(map, "zoom_changed", function() {
oldZoom = map.getZoom();
console.log(oldZoom);
console.log(oldCenter.toString());
});
google.maps.event.addListenerOnce(map, "center_changed", function() {
oldCenter = map.getCenter();
});
console.log(map);
oldMap = map;
console.log(oldMap);
// pan to marker
setTimeout(function() {
map.panTo(trans_marker)
}, startDelayed(3000));
// zoom in on marker
setTimeout(function() {
zoomIn(ENDZOOM)
}, startDelayed(1000));
// show info window
var contentString = "<h3>D?ner @ Coco Banh</h3>";
contentString += ("<p>SumUp was used to pay for a D?ner at Coco Banh in Berlin, Germany</p>");
var infowindow = new google.maps.InfoWindow({
content: contentString
});
setTimeout(function() {
infowindow.open(map, marker)
}, startDelayed(8000));
setTimeout(function() {
infowindow.close()
}, startDelayed(5000));
// zoom out again
setTimeout(function() {
zoomOut(oldZoom)
}, startDelayed(2000));
// center again
setTimeout(function() {
map.panTo(oldCenter)
}, startDelayed(8000));
infowindow = new google.maps.InfoWindow({
content: contentString
});
}
google.maps.event.addDomListener(window, "load", initialize);
function placeMarker(latlng) {
var marker = new google.maps.Marker({
position: latlng,
map: map
})
}
function startDelayed() {};
function zoomIn(zoom) {};
function zoomOut(zoom) {};html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas"></div>