如何抵消谷歌地图api V3中的中心点

Question

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

我希望这是有道理的.

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

提前致谢!

Answer 1

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

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

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

代码如下.在线示例.在该示例中,单击按钮将地图的中心(那里有一个道路交叉点)向下移动100px并离开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);

}

Answer 2

另请查看maps对象上的panBy(x:number,y:number)函数.

文档提到了这个函数:

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

只需像这样使用它:

mapsObject.panBy(200, 100)

Answer 3

这是一种更简单的方法,可能在响应式设计中更有用,因为您可以使用百分比而不是像素.没有世界坐标,没有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);

Answer 4

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

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

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

进一步阅读：官方文档。

Answer 5

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

Answer 6

安德鲁就是答案.但是,在我的情况下,map.getBounds()保持返回undefined.我修复它等待bounds_changed事件,然后调用函数来偏移中心.像这样:

var center_moved = false;
google.maps.event.addListener(map, 'bounds_changed', function() {
  if(!center_moved){
    offsetCenter(map.getCenter(), 250, -200);
    center_moved = true; 
  }
});

Answer 7

老问题，我知道。但是一种更以 CSS 为中心的方式呢？

http://codepen.io/eddyblair/pen/VjpNQQ

我所做的是：

• 将地图和覆盖物包裹在一个容器中 overflow: hidden

• 覆盖覆盖物 position: absolute

• 通过设置一个负值，通过叠加宽度（加上任何填充和偏移）扩展地图的表观宽度margin-left。

• 然后为了符合https://www.google.com/permissions/geoguidelines/attr-guide.html定位小部件和属性div。

这样，地图的中心就与所需区域的中心对齐。js 只是标准的地图 js。

重新定位街景图标是读者的练习:)

如果您想要左侧的叠加层，只需将 line 更改24 margin-left为margin-rightline 32right即可left。