Maps Api V3：getCenter（）和getZoom（）不起作用 [英] Maps Api V3: getCenter() and getZoom() not working

问题描述

在Google Maps API V3中，我创建了一个地图对象：

In the Google Maps API V3, I've created a map object:

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

我会放大并平移该地图，稍后返回到原始视图， d喜欢保存缩放级别和地图中心。我尝试以下方法：

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.

谢谢！

完整代码：

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


}

推荐答案

<问题是边界和中心还没有设置。要获得它们，您需要在zoom_changed（用于缩放）的侦听器中执行此操作; center_changed（对于中心）。可用地图事件在事件下的文档中列出。您可以使用 addListenerOnce 仅执行一次（第一次）。

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 addListenerOnce to only do it once (the first time).

类似这样的东西应该可以工作（未测试）：

Something like this should work (not tested):

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.

这篇关于Maps Api V3：getCenter（）和getZoom（）不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！