JavaScript调用pan()函数时，如何将Marker位置更新至新地图中心点？

嘿，别担心，作为JavaScript新手遇到这类问题太正常啦！你的代码已经实现了地图中心点的切换，但Marker没跟着移动主要有两个小细节需要调整，咱们一步步来改：

问题分析 #

1. 你的marker变量是在myMap()函数内部定义的局部变量，外部的pan()函数没法访问到它；
2. pan()函数里只更新了地图的中心点，但没有同步更新Marker的位置。

修改后的完整代码 #

var map; // 全局声明map
var marker; // 全局声明marker，让pan函数能访问到它
var panPoint;

function myMap() {
  var Center = new google.maps.LatLng(32.224063, 35.230539);
  var mapProp = {
    zoom: 8,
    center: Center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var canvas = document.getElementById("googleMap");
  map = new google.maps.Map(canvas, mapProp);
  
  // 初始化marker，赋值给全局变量
  marker = new google.maps.Marker({
    position: Center
  });
  marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', myMap);

function pan() {
  panPoint = new google.maps.LatLng(
    document.getElementById("lat").value, 
    document.getElementById("lng").value
  );
  // 1. 移动地图中心点
  map.panTo(panPoint);
  // 2. 同步移动Marker到新中心点
  marker.setPosition(panPoint);
}

关键修改点说明 #

• 把marker（还有map）提升到全局作用域声明，这样pan()函数就能获取到这个Marker实例；
• 在pan()函数里添加marker.setPosition(panPoint)，调用Google Maps API提供的方法更新Marker的位置，这样Marker就会跟着地图中心点一起移动啦。

如果之后还有其他Google Maps相关的小问题，尽管问就好～

内容的提问来源于stack exchange，提问作者mohannad hendi