0

我有一个在点击谷歌地图标记时打开的信息框。在 infoBox 内有一个按钮“#open-popup”，单击该按钮应打开一个 magnificPopup 模式窗口，但没有任何反应。

作为测试，我在包含谷歌地图的 div 之外放置了相同的按钮，该按钮会打开模式窗口，但仅在第二次点击时！到底是怎么回事？

我已经尝试了很多天，但都有最严重的副作用。

任何帮助都感激不尽。

信息框内按钮的 HTML：

<div style=...>
<centre>
<button id="open-popup">Open popup</button>
<div id="my-popup" class="mfp-hide white-popup">Inline popup</div>
</center>
</div>

谷歌地图 div 外按钮的 HTML：

<button id="open-popup">Open popup</button>
<div id="my-popup" class="mfp-hide white-popup">Inline popup</div>

JS：

myapp.triggerClick = function (){
  google.maps.event.trigger(gmarkers[id],"click")
};

var infoboxOptions = {
             content: ''
            ,disableAutoPan: false
            ,alignBottom: true
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(0, 0)
            ,zIndex: 1000
            ,boxStyle: {
              background:''
              ,opacity: 0.9
             }
            ,closeBoxMargin: "4px 4px 0 0"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1,1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
        };
var ib = new InfoBox(infoboxOptions);

function createMarker(latlng, html, id) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
        //zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
      ib.setContent(contentString);
      ib.open(map,marker);
    });
    gmarkers[id] = marker;
}

$(document).on('click', '#open-popup', function () {
    $(this).magnificPopup({
      items: {
        src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg'
      },
      type: 'image' // this is default type
    });
});
4

1 回答 1

3

尝试将您的 jQuery 单击事件放在地图事件侦听器中，该事件侦听器设置为在单击信息框时触发。需要地图事件侦听器，因为谷歌地图内的点击事件由谷歌地图 API 处理。

所以对你来说，像：

window.google.maps.event.addListener(ib, "domready", function () {
    $('#open-popup').on('click', function () {
        $(this).magnificPopup({
          items: {
            src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg'
          },
          type: 'image' // this is default type
        });
    });
});

请注意，我还为您的点击事件更新了选择器。您可能想尝试一下，因为通常的on选择器语法在我的情况下不起作用，例如$('.preExistingElementSelector').on('click', '.dynamicElementSelector', function(){});

每次显示和关闭时，信息框都会从 dom 中动态添加和删除。所以上面的函数本质上是在将新的 infobox 实例添加到 dom 之后（即可见），将这个新的 click 事件添加到它。关闭该信息框后，它就会从 dom 中删除，这也意味着您附加到它的事件处理程序也消失了。这就是为什么我们每次都添加一个新的。

我敢肯定那里可能有一个更整洁的解决方案，我只是没有时间找到一个！

此外，请确保保留enableEventPropagation: false信息框选项，以免点击事件被 Google 地图吞没。

更新

这是一个工作示例：http: //jsfiddle.net/gavinfoley/4WRMc/10/

您真正需要的是能够通过 API 打开宏伟的弹出窗口。所以我所做的唯一改变就是改变

$(this).magnificPopup({...});

到

$.magnificPopup.open({...});

这解决了它。

window.google.maps.event.addListener(ib, "domready", function () {       
    $('.open-popup').on('click', function () {
        // Open magnificPopup through API
        // See http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline_type
        $.magnificPopup.open({
            items: {
                src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/23/0418_-_Palermo%2C_Museo_archeologico_-_Testa_dal_tempo_E_di_Selinunte_-_Foto_Giovanni_Dall%27Orto.jpg/180px-0418_-_Palermo%2C_Museo_archeologico_-_Testa_dal_tempo_E_di_Selinunte_-_Foto_Giovanni_Dall%27Orto.jpg'
            },
            type: 'image' // this is default type
        });

    });
});
于 2013-07-09T08:33:24.397 回答