无法从Google Maps infoBox中的按钮打开Magnific-popup

Question

我有一个信息框，当单击Google地图标记时会打开。 在信息框中，有一个“＃open-popup”按钮，单击该按钮应打开magnificPopup模态窗口，但什么也没有发生。

作为测试，我在包含Google Map的div外部放置了相同的按钮，该按钮会打开模式窗口，但仅在第二次单击时才打开！ 到底是怎么回事？

我已经尝试了好几天的所有东西，但都有最坏的副作用。

任何帮助都感激不尽。

infoBox中按钮的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>

Google Maps 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
    });
});

Answer 1

尝试将jQuery click事件放置在地图事件侦听器中，该事件设置为在单击信息框时触发。 需要使用地图事件监听器，因为Google地图内部的点击事件由Google Map 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 click事件更新了选择器。 你可能想玩弄，作为平时on选择语法不会在我的情况，如工作$('.preExistingElementSelector').on('click', '.dynamicElementSelector', function(){});

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

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

另外，请确保在信息框选项中保留enableEventPropagation: false ，以使click事件不会被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
        });

    });
});