多年来我一直在制作自己的纸质地图（是的，我这样很老式！） - 我带着它们去度假或将它们用作挂图。基本上，我使用由 Javascript 驱动的 Google Maps API 来生成彼此偏移的地图，抓取生成的图像并使用我自己的代码将它们拼接在一起。我发现最好的方法是使用 PanBy 方法，因为偏移量是精确的像素数，并且不受舍入误差的影响。
但是，“PanBy”方法似乎不再起作用 - 它只是被忽略 - 无论 PanBy 指令中的设置如何，地图都会出现在相同的位置（由初始经纬度坐标确定）。
我通过重新使用过去成功运行的旧脚本来仔细检查这一点，发现它们不再生成偏移贴图。我尝试使用 FireFox 和 Chrome 作为浏览器，甚至启动了我的旧 Windows 7 机器，以防出现 Windows 更新问题 - 但没有什么乐趣。在我看来，PanBy 方法已损坏！
如您所见，脚本非常简单：
function initialize() {
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(XX.XXXXXX , XX.XXXXXX);
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.panBy(0, 0)
}
过去，我只是简单地改变 PanBy 命令中的 X 和 Y 坐标即可获得偏移图。
我很惊讶它竟然有效，但 API 启动过程中的某些内容可能已经发生了变化。一般来说，Google Maps API v3 是事件驱动的，您应该等待地图初始化后再尝试平移地图。
类似：
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
map.panBy(100, 500)
})
代码片段：
function initialize() {
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(-33.9, 151.2);
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
});
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
map.panBy(100, 500)
})
}
window.initialize = initialize;/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map_canvas {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}<!doctype html>
<html>
<head>
<title>Complex Marker Icons</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map_canvas"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&v=weekly"
defer
></script>
</body>
</html>