如何在谷歌地图api V3中偏移中心点

IT技术 javascript google-maps-api-3
2021-01-12 19:34:21

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

我希望这是有道理的。

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

提前致谢!

我正在构建的地图模型

6个回答

一旦您找到相关的先前答案,这并不是特别困难

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

API 将始终将地图居中放置在视口的中心,因此您在使用时需要小心,map.getCenter()因为它会返回真实的中心,而不是明显的中心。我想可以重载 API 以替换getCenter()setCenter()方法,但我还没有这样做。

代码如下。在线示例在示例中,单击按钮会将地图的中心(那里有一个路口)向下移动 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);

}
是否可以在页面加载时触发此代码,以便第一次查看时地图显示为偏移量?
2021-03-13 19:34:21
谢谢安德鲁,所以在我的代码中,我使用了 addMarkerFromAdress(latLng, title) 并替换为函数 offsetCenter(latlng,offsetx,offsety) 并且它仍然有效 - 但是我如何将 offsety (243px) 的值放入函数中?
2021-03-13 19:34:21
我发现nw这个脚本从未使用过 var,至少在我的用例中可以毫无问题地删除它。我没有单独尝试这个,因为我有很多其他方法已经设置了边界等等。
2021-03-21 19:34:21
更好的使用 map.panBy(250, 0);
2021-03-24 19:34:21
@DarrenCook:当然。只需使用 this 而不是map.setCenter(). 所有这些代码所做的就是重新计算地图被告知要做的事情,然后它会执行自己的map.setCenter().
2021-03-27 19:34:21

另请查看地图对象上的 panBy(x:number, y:number) 函数。

文档提到了有关该功能的内容:

按给定的距离(以像素为单位)更改地图的中心。如果距离小于地图的宽度和高度,过渡将平滑动画。请注意,地图坐标系从西向东(对于 x 值)和从北向南(对于 y 值)增加。

只需像这样使用它:

mapsObject.panBy(200, 100)
这应该就是答案。它工作得很好,很容易。谢谢。
2021-03-29 19:34:21
任何人都知道一种始终禁用此方法的动画的方法吗?
2021-04-07 19:34:21

以下是使用panBy()地图 API 的方法解决问题的示例http : //jsfiddle.net/upsidown/2wej9smf/

jsfiddle.net/upsidown/rat1fkkc 这里是我的答案编辑类似于颠倒先生
2021-04-03 19:34:21

这是一种更简单的方法,在响应式设计中可能更有用,因为您可以使用百分比而不是像素。没有世界坐标,没有 LatLngs 到点!

var center;  // a latLng
var offsetX = 0.25; // move center one quarter map width left
var offsetY = 0.25; // move center one quarter map height down

var span = map.getBounds().toSpan(); // a latLng - # of deg map spans

var newCenter = { 
    lat: center.lat() + span.lat()*offsetY,
    lng: center.lng() + span.lng()*offsetX
};

map.panTo(newCenter);  // or map.setCenter(newCenter);
解决方案的简单性和考虑响应式设计的绝佳答案
2021-03-14 19:34:21
如果需要在同一操作中更改缩放,这将不起作用。此外,如果目的地(新)中心在地理上远离当前中心,它也不会准确工作。即使在相同的缩放级别,屏幕宽度的 0.25 表示赤道上的距离与挪威不同,例如,由于使用了墨卡托投影。投影最终坐标更加稳健。
2021-03-21 19:34:21
在 InfoBox 上试过这个,它有效!(虽然pixelOffset还需要修复)
2021-03-25 19:34:21
我收到未捕获的类型错误:无法读取未定义的属性“toSpan”
2021-04-02 19:34:21
我们可以得到 newCenter lat 长吗?
2021-04-02 19:34:21

刚刚找到了另一个最简单的解决方案。如果您使用 fitBounds 方法,您可以将可选的第二个参数传递给它。这个参数是填充,将在拟合边界时考虑。

// pass single side:
map.fitBounds(bounds, { left: 1000 })

// OR use Number:
map.fitBounds(bounds, 20)

进一步阅读:官方文档

太棒了!
2021-03-30 19:34:21