我正在使用 Google Maps API v3 在网站上创建内嵌地图。在它的容器元素中，我还有一个绝对定位的叠加层，它显示了一些详细信息，视觉上悬停在地图上。根据上下文确定此元素可能会增长到整个地图元素的大小。
这一切都很好，但是 Maps 实例当然仍然认为地图的覆盖部分是地图的有效可用部分。这意味着，尤其是当叠加层处于最大高度时，setCenter 不会关注 可见 中心，并且使用 DirectionsRenderer 绘制的路线部分位于叠加层下方。
看这张图片：
有没有办法将实际视口限制在蓝色区域，以便setCenter 以箭头为中心，setBounds 适合蓝色部分？
【问题讨论】：
标签： javascript google-maps google-maps-api-3
我暂时已经设法实现了一个可接受的功能解决方法。
一些值得了解的一般注意事项：
Map 对象都有一个Projection，可以在LatLng 点和地图点之间进行转换。Projection 用于计算的地图点位于“世界”坐标中，这意味着它们是缩放级别为 0 时世界地图上的像素。2 ^ zoom。下面的示例假定右侧有一个 300 像素宽的侧边栏 - 适应其他边框应该很容易。
利用这些知识，编写一个用于偏心的自定义函数变得微不足道：
function setCenter(latlng)
{
var z = Math.pow(2, map.getZoom());
var pnt = map.getProjection().fromLatLngToPoint(latlng);
map.setCenter(map.getProjection().fromPointToLatLng(
new google.maps.Point(pnt.x + 150/z, pnt.y)));
}
这里的关键位是z 变量，以及最后一行中的pnt.x + 150/z 计算。由于上述假设，这会将当前缩放级别的点移动到左侧 150 像素的中心，从而补偿右侧边栏上缺失的 300 像素。
边界问题远没有那么微不足道。这样做的原因是要正确偏移点，您需要知道缩放级别。对于重新定位，这不会改变，但为了适应以前未知的界限，它几乎总是会改变。由于 Google 地图在适应边界时会在内部使用未知边距，因此没有可靠的方法来预测所需的缩放级别。
因此，一个可能的解决方案是调用两步火箭。首先，用整个地图致电fitBounds。这应该使边界和缩放级别至少几乎正确。然后在此之后，再次调用fitBounds 修正侧边栏。
应该使用LatLngBounds 对象作为参数调用以下示例实现，或者没有参数以默认为当前边界。
function setBounds(bnd, cb)
{
var prj = map.getProjection();
if(!bnd) bnd = map.getBounds();
var ne = prj.fromLatLngToPoint(bnd.getNorthEast()),
sw = prj.fromLatLngToPoint(bnd.getSouthWest());
if(cb) ne.x += (300 / Math.pow(2, map.getZoom()));
else google.maps.event.addListenerOnce(map,'bounds_changed',
function(){setBounds(bnd,1)});
map.fitBounds(new google.maps.LatLngBounds(
prj.fromPointToLatLng(sw), prj.fromPointToLatLng(ne)));
}
我们首先在这里做的是获取边界的实际点，由于没有设置 cb，我们在 bounds_changed 上安装了一个一次性事件，然后在 fitBounds 完成后触发.这意味着在校正缩放后，该函数会自动第二次调用。第二次调用，使用cb=1，然后偏移框以校正 300 像素宽的侧边栏。
在某些情况下，这可能会导致轻微的动画偏离，但在实践中，我只在真正垃圾点击按钮导致适合操作时才看到这种情况。否则它运行得非常好。
希望这可以帮助某人:)
【讨论】：
您可以使用地图panBy() method，它允许您将地图的中心更改为给定距离（以像素为单位）。
希望这会有所帮助！
【讨论】：
我也有类似的需求，最后只是在 LatLngBounds 对象的东边强制了一些“填充”。
从好的方面来说，它很简单而且很有效。不利的一面是，它并不是真正通用的。只是一个快速的小技巧。
// start with a standard LatLngBounds object, extending as you usually would...
bounds = new google.maps.LatLngBounds();
// ...
ne = bounds.getNorthEast();
sw = bounds.getSouthWest();
// the multiplier used to add space; positive for east, negative for west
lngPadding = 1.5
extendedLng = ne.lng() + (ne.lng() - sw.lng()) * lngPadding;
// copy original and extend with the new Lng
extendedBounds = bounds;
extendedBounds.extend(new google.maps.LatLng(ne.lat(), extendedLng));
map.fitBounds(extendedBounds);
【讨论】：