如何在谷歌地图的边缘创建填充

我有一个非常繁忙的谷歌地图应用程序，我正在尝试在地图的外边缘周围创建一个“缓冲区”，以便谷歌地图命令不会把东西放在那里。我的解决方案是创建不可见的 div 并将它们作为控件添加到地图中，每个边缘一个。这似乎很有效，因为所有谷歌命令都会看到它们并进行相应调整，并且地图会正常显示。例如，fitBounds 确保我的边界不在不可见层之下。对于有控制栏的顶部，这是一个完美的解决方案，但对于没有任何东西的其他边缘，它会产生一个问题 - 我无法单击这些控件下的地图或信息窗口，因为它们接受单击事件。

所以我正在寻找两种解决方案之一： 1）我可以让我的隐形控件将点击传递到地图，或者； 2）有没有更好的方法来填充地图边缘；每次我想调用 fitBounds 或 panTo 时不涉及太多数学的东西将是首选，因为我自动化了很多地图运动

Cheers

我设法解决了这个问题。

向地图添加填充的最佳方法是使用不可见控件。它创建所有其他映射函数在调用它们时遵循的填充，无需任何额外的编码。以下是为其他有需要的人提供的方法。 首先..我创建一个函数来简化 div 的创建。

function createDummyDiv(w, h){
    var out = $(document.createElement('div')).addClass('dummy-div').css('width', w).css('height', h);
    return out[0];
}

然后我根据需要添加控件。在本例中，我在 LEFT_CENTER 位置有正常的缩放控件，因此我必须为左侧创建 2 个。这会在左侧、右侧和底部创建 10% 的填充，并在我自己的控制栏下方的顶部创建 55px 的填充。

map.controls[google.maps.ControlPosition.TOP_CENTER].push(createDummyDiv('100%', '55px'));
map.controls[google.maps.ControlPosition.LEFT_TOP].push(createDummyDiv('10%', '45%'));
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(createDummyDiv('10%', '45%'));
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(createDummyDiv('10%', '100%'));
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(createDummyDiv('100%', '10%'));

我的问题的最终解决方法是用 css 将它们放在地图层后面。

.dummy-div{ z-index: -100 !important; }

我希望这对其他人有帮助