javascript - map API V3 : getCenter() and getZoom() not working

Question

在 Google Maps API V3 中，我创建了一个 map 对象:

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

我将放大并平移该 map ，稍后返回原始 View ，我想保存缩放级别和 map 的中心。我尝试以下操作:

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 中列出了可用的 map 事件, 在事件下。您可以使用 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(); });

proof of concept fiddle

在这些事件被触发之前，您将无法使用它们。

代码片段:

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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>