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

Posted 2023-02-23

【中文标题】Maps Api V3：getCenter() 和 getZoom() 不起作用

【英文标题】：Maps Api V3: getCenter() and getZoom() not working

【发布时间】：2012-11-06 06:00:33

【问题描述】：

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

【问题讨论】：

底部似乎多了一个花括号。这里有更多上下文吗？ iirc，信息窗口的分配发生在初始化方法之外。 fwiw，总体思路应该可行。我以前做过类似的事情。

【参考方案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(); );

proof of concept fiddle

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

代码 sn-p：

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>

【讨论】：

还有一个idle 事件，这很有用，因为center_changed 可以触发很多 ... google.maps.event.addListenerOnce(map, "idle", function() );