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

Question

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

所以我正在寻找两种解决方案中的一种: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; }

我希望这有助于其他人