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

    }); 
});