Google 地图拖动在灯箱中不起作用

Question

我正在尝试在灯箱内显示 google 地图，但拖动和滚轮选项不起作用。也许你知道该怎么做。我不知道问题是否与 z-indexes 有关。我什么都试过了。

所以我使用的灯箱是这样的：Lightcase。把整个灯箱代码放在这里也没用，因为我觉得你不想在这里全部看到。

但是我的一些代码我可以展示：

Link:
<a data-rel="lightcase" href="#map-canvas2">Show map</a>

Div:
<div id="map-canvas2"></div>

Google maps JS code:
function initialize2() {

    var mapOptions2 = {
        zoom: 17,
        center: new google.maps.LatLng(41.3491, 40.7159),
        disableDefaultUI: true
        draggable: true,
        scrollwheel: true
    }
    map2 = new google.maps.Map(document.getElementById('map-canvas2'), mapOptions2);
}

And some CSS:
#map-canvas2 {
    visibility: hidden;
    border: 0;
}

宽高是用JS给定的。可见性隐藏来自此修复：Map bug fix，但这些并不重要。刚刚提到。

如果我在地图打开时滚动，地图缩放不起作用，它只是在后台滚动页面。

如有帮助，谢谢。

Answer 1

此库创建容器的克隆，将显示在灯箱中（不具有任何交互功能）。

您可以在 onFinish-callback 中为克隆的节点创建一个新的 Map-instance，但我不建议这样做，您最好使用另一个库，或者修改此库，使其使用原始元素代替克隆人。

Google 地图拖动在灯箱中不起作用

Google maps dragging doesn't work in lightbox

jquery

google-maps

z-index