javascript - 如何偏移 Google maps api V3 中的中心点

Question

我有一张谷歌地图，其中半透明面板覆盖了部分区域。我想调整 map 的中心点以考虑到部分被遮挡的 map 部分。请参见下图。理想情况下，放置十字准线和图钉的位置将是 map 的中心点。

我希望这是有道理的。

原因很简单:当您缩放时，它需要将 map 置于十字准线的中心，而不是 50% 50%。此外，我将在 map 上绘制标记并按顺序移动它们。本地图以它们为中心时，它们也需要处于偏移位置。

Answer 1

一旦找到the relevant previous answer，这并不是特别困难.

您需要将 map 的中心转换为其世界坐标，找到 map 需要居中的位置以将表观中心放在您想要的位置，然后重新居中 map 使用真实中心。

API 始终将 map 置于视口(viewport)的中心，因此在使用 map.getCenter() 时需要小心，因为它会返回真实的中心，而不是表面上的中心.我想可以重载 API，以便替换它的 getCenter() 和 setCenter() 方法，但我还没有这样做。

代码如下。 Example online .在示例中，单击按钮会将 map 的中心(那里有一个路口)向下移动 100 像素并向左移动 200 像素。

function offsetCenter(latlng, offsetx, offsety) {

    // latlng is the apparent centre-point
    // offsetx is the distance you want that point to move to the right, in pixels
    // offsety is the distance you want that point to move upwards, in pixels
    // offset can be negative
    // offsetx and offsety are both optional

    var scale = Math.pow(2, map.getZoom());

    var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
    var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0);

    var worldCoordinateNewCenter = new google.maps.Point(
        worldCoordinateCenter.x - pixelOffset.x,
        worldCoordinateCenter.y + pixelOffset.y
    );

    var newCenter = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);

    map.setCenter(newCenter);

}