Maps Api V3：getCenter() 和 getZoom() 不起作用

Question

在 Google Maps 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（对于中心）。可用的地图事件在文档中的事件下列出。您可以使用 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(); });

概念证明小提琴

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

代码片段：

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>

Answer 2

如果尝试使用 getZoom() 时出现以下错误：

TypeError: undefined is not an object (evaluating 'mapRef.current.getZoom')

您可以在以下位置找到当前缩放：

mapRef.current.state.map.zoom

例如，我正在使用react-google-maps/api组件，其中

 const onZoomChanged = () => {
    if (mapRef.current) {
      setZoom(mapRef.current.state.map.zoom);
    }
  };

  return (
    // ... Modal and other components ...
    <GoogleMap
      mapContainerStyle={mapContainerStyle}
      center={mapCenter}
      zoom={zoom}
      ref={mapRef} // Correctly attaching ref here
      onZoomChanged={onZoomChanged}
      onClick={handleMapClick}
      // ... other props ...
    >
      {markerPosition && <Marker position={markerPosition} />}
    </GoogleMap>
    // ... rest of the component ...
  );
};