Google Maps API的PanBy方法失效问题求助

你的脚本存在几个关键问题，导致panBy方法未生效，和Google Maps API本身无关：

1. 变量作用域错误 #

map是initialize函数内部的局部变量，函数外部的事件监听器无法访问到该对象，因此panBy的逻辑完全没有被执行。

2. API回调不匹配 #

加载Google Maps API时指定了callback=initMap，但你的初始化函数名为initialize，这会导致API加载完成后无法正确触发初始化逻辑，同时和body标签的onload属性产生冲突。

3. 代码语法/结构错误 #

事件监听器的代码块被错误放置在initialize函数外部，还存在多余的闭合大括号，导致语法异常。

修正后的完整脚本 #

<!DOCTYPE html>
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
html { height: 100% } 
body { height: 100%; margin: 0; padding: 0 } 
#map_canvas { height: 100% } 
</style> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&callback=initMap"
  type="text/javascript"></script>
<script type="text/javascript">

function initMap() { 

//BMAP_ROWS_COLS:1:5

var PlainStyle = [
{featureType: "administrative",elementType: "all",stylers: [{ visibility: "on" }]},
{featureType: "landscape",elementType: "all",stylers: [{ visibility: "on" }]},
{featureType: "poi",elementType: "all",stylers: [{ visibility: "on" }]},
{featureType: "road",elementType: "all",stylers: [{ visibility: "on" }]},
{featureType: "transit",elementType: "all",stylers: [{ visibility: "on" }]},
{featureType: "water",elementType: "all",stylers: [{ visibility: "on" }]},
];

var latlng = new google.maps.LatLng(51.00000000 , -1.10000000);
var myOptions = { 
zoom: 19,
center: latlng, 
panControl: false,
zoomControl: false,
scaleControl: false,
fullscreenControl: true,
streetViewControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.SATELLITE,
};
 
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
map.setOptions({styles: PlainStyle});

// 将监听器移至函数内部，确保能访问map变量
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    map.panBy(1820, 0);
});
}

</script> 
</head> 
<body> 
<div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 
</html>

修改说明 #

• 将初始化函数名改为initMap，与API的callback参数匹配，同时移除body标签的onload属性，避免加载冲突。
• 将tilesloaded事件监听器移入initMap函数内部，确保能访问到局部变量map。
• 移除多余的闭合大括号，修正语法错误。

修改完成后，panBy方法即可正常触发，地图会按照指定像素偏移量移动。

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