Magnific-popup无法打开从谷歌地图infoBox中的按钮

Question

我有一个infoBox，当点击谷歌地图标记时打开。在infoBox里面有一个按钮'＃open-popup'，点击时应该打开一个magnificPopup模式窗口，但没有任何反应。

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

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

任何帮助将不胜感激。

HTML的按钮内的信息框：

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

JS：

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

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的单击事件的地图内事件监听器，当单击信息框时它被设置为触发。地图事件侦听器是需要的，因为谷歌地图内的点击事件是由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选择器语法不起作用，例如， $('.preExistingElementSelector').on('click', '.dynamicElementSelector', function(){});

信息框是动态添加和删除从dom每次显示和 关闭。那么上面的函数实质上是在将新的信息框实例添加到dom（即可见的）之后，向其添加新的点击事件。一旦你关闭了信息框，它就会从dom中移除，这也意味着你附加到它的事件处理程序也不存在了。这就是为什么我们每次都添加一个新的。

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

此外，请务必将enableEventPropagation: false保留在信息框选项中，以免Google地图吞掉点击事件。

UPDATE

这里是一个工作示例：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 
     }); 

    }); 
});