我有一张谷歌地图,上面有一个半透明面板,覆盖了该区域的一部分。我想调整地图的中心点以考虑到部分被遮挡的地图部分。见下图。理想情况下,放置十字准线和图钉的位置将是地图的中心点。
我希望这是有道理的。
原因很简单:缩放时需要将地图居中放置在十字准线上,而不是 50% 50%。此外,我将在地图上绘制标记并按顺序移动它们。当地图以它们为中心时,它们也需要处于偏移位置。
提前致谢!
我有一张谷歌地图,上面有一个半透明面板,覆盖了该区域的一部分。我想调整地图的中心点以考虑到部分被遮挡的地图部分。见下图。理想情况下,放置十字准线和图钉的位置将是地图的中心点。
我希望这是有道理的。
原因很简单:缩放时需要将地图居中放置在十字准线上,而不是 50% 50%。此外,我将在地图上绘制标记并按顺序移动它们。当地图以它们为中心时,它们也需要处于偏移位置。
提前致谢!
一旦您找到相关的先前答案,这并不是特别困难。
您需要将地图的中心转换为其世界坐标,找到需要将地图居中的位置以将明显的中心放在您想要的位置,然后使用真实中心重新居中地图。
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);
}
另请查看地图对象上的 panBy(x:number, y:number) 函数。
文档提到了有关该功能的内容:
按给定的距离(以像素为单位)更改地图的中心。如果距离小于地图的宽度和高度,过渡将平滑动画。请注意,地图坐标系从西向东(对于 x 值)和从北向南(对于 y 值)增加。
只需像这样使用它:
mapsObject.panBy(200, 100)
以下是使用panBy()
地图 API 的方法解决问题的示例:http : //jsfiddle.net/upsidown/2wej9smf/
这是一种更简单的方法,在响应式设计中可能更有用,因为您可以使用百分比而不是像素。没有世界坐标,没有 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);
刚刚找到了另一个最简单的解决方案。如果您使用 fitBounds 方法,您可以将可选的第二个参数传递给它。这个参数是填充,将在拟合边界时考虑。
// pass single side:
map.fitBounds(bounds, { left: 1000 })
// OR use Number:
map.fitBounds(bounds, 20)
进一步阅读:官方文档。