Question

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

所以我正在寻找两种解决方案之一： 1）我可以让我的隐形控件通过点击进入地图，或者; 2）是否有更好的方法来填充地图的边缘;每次我想调用fitBounds或panTo时都不会涉及大量数学的东西，因为我自动执行大量的地图运动

干杯

Answer 1

我设法解决了这个问题。

向地图添加填充的最佳方法是使用不可见的控件。它创建了填充，所有其他映射函数在调用时无需任何额外编码即可遵循。以下是如何为需要此功能的其他人执行此操作。首先..我创建了一个函数来简化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; }

我希望这有助于其他人

Answer 2

尝试给不可见的DIV一个负的z指数，例如-10

Answer 3

对我来说，fitBounds api使用第二个参数（填充）

Add padding to google map bounds

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

3 个答案: