地圖API V3：getCenter（）和getZoom（）不工作

Question

在谷歌地圖API V3，我創建了一個地圖對象：

map = new google.maps.Map(document.getElementById("map_canvas"), 
    myOptions); 

我將放大和平移該地圖上和去稍後回到原始視圖，我想保存縮放級別和地圖中心。我嘗試以下操作：

oldCenter = map.getCenter(); 
oldZoom = map.getZoom(); 

但變量保持'未定義'。當我在控制檯上做同樣的事情時，我會得到正確的答案。

我在做什麼錯？請讓我知道是否需要更多的代碼來找到答案或者它是一個明顯的問題。

謝謝！

全碼：

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 
}); 


} 

Answer 1

的問題是，邊界和中心都沒有被設定。要獲得它們，您需要在zoom_changed（用於縮放）的偵聽器中執行此操作; center_changed（對於中心）。活動中的可用地圖事件列在documentation中。您可以使用addListenerOnce只做一次（第一次）。

像這樣的東西應該工作（未測試）：

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(); }); 

您將無法使用，直到後的事件已經被解僱。