如何抵消谷歌地图api V3的中心点 [英] How to offset the center point in Google maps api V3

问题描述

我有一张半透明面板覆盖该区域的Google地图。我想调整地图的中心点，以考虑部分模糊的地图部分。看到下面的图片。理想情况下，十字线和销子的放置位置应该是地图的中心点。

I have a Google map with a semi transparent panel covering a portion of the area. I would like to adjust the center point of the map to take into account the portion of the map that is partially obscured. See the image below. Ideally, where the crosshairs and pin are placed would be the center point of the map.

我希望这是有道理的。

原因很简单：放大时需要将地图放在十字准线上，而不是50％50％。另外，我会在地图上绘制标记并依次移动它们。当地图以他们为中心时，他们也需要处于偏移位置。

The reason is simple: When you zoom it needs to center the map over the crosshair rather than at 50% 50%. Also, I will be plotting markers on the map and moving through them in sequence. When the map centers on them, they also need to be at the offset position.

预先感谢！

推荐答案

一旦您找到以前的相关答案。

您需要将地图中心转换为其世界坐标，找到地图需要居中的位置，以将明显的中心放在需要的位置，然后使用 real 中心重新居中地图。

You need to convert the centre of the map to its world co-ordinates, find where the map needs to be centered to put the apparent centre where you want it, and re-centre the map using the real centre.

API将始终将地图居中在视口中心，因此如果使用 map.getCenter（），则需要小心。因为它会返回真正的中心，而不是表面的中心。我想可能会重载API以使其 getCenter（）和 setCenter（）方法被替换，但我没有这样做。

The API will always centre the map on the centre of the viewport, so you need to be careful if you use map.getCenter() as it will return the real centre, not the apparent centre. I suppose it would be possible to overload the API so that its getCenter() and setCenter() methods are replaced, but I haven't done that.

下面的代码。 在线示例。在这个例子中，点击按钮将地图中心（有一个路口）向下移动100px，然后离开200px。

Code below. Example online. In the example, clicking the button shifts the centre of the map (there's a road junction there) down 100px and left 200px.

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);

}

这篇关于如何抵消谷歌地图api V3的中心点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！