javascript - 移动谷歌地图中心javascript api

Question

在我的项目中，我想将 map 的中心移动到新的坐标。这是我的 map 代码

function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(0, 0),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
  }
  function moveToLocation(lat, lng){
     var center = new google.maps.LatLng(lat, lng);
     var map = document.getElementById("map_canvas");
     map.panTo(center);

  }

moveToLocation 函数确实被调用，但 map 没有重新居中。知道我错过了什么吗？

Answer 1

您的问题是，在 moveToLocation 中，您使用 document.getElementById 尝试获取 Map 对象，但这只得到您是一个 HTMLDivElement，而不是您期望的 google.maps.Map 对象。因此，您的变量 map 没有 panTo 函数，这就是它不起作用的原因。您需要的是将 map 变量隐藏在某个地方，它应该按计划工作。您可以像这样使用全局变量:

window.map = undefined;      // global variable

function initialize() {
  const mapOptions = {
    center: new google.maps.LatLng(0, 0),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  // assigning to global variable:
  window.map = new google.maps.Map(
    document.getElementById("map_canvas"), mapOptions);
}

function moveToLocation(lat, lng){
  const center = new google.maps.LatLng(lat, lng);
  // using global variable:
  window.map.panTo(center);
}

在此处查看正在运行的 jsFiddle:http://jsfiddle.net/fqt7L/1/