移动谷歌地图中心javascript api

Question

在我的项目中,我想将地图的中心移动到新的坐标.这是我对地图的代码

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函数会被调用,但地图不会重新居中.知道我错过了什么吗？

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/