Google地图infoBox中的按钮无法打开Magnific-popup [英] Magnific-popup fails to open from button inside Google Maps infoBox
问题描述
我点击Google地图标记时会打开一个infoBox。在信息框内有一个按钮'＃open-popup'，点击时应该打开一个magnificPopup模式窗口，但没有任何反应。
作为一项测试，我在包含谷歌地图的div的外部放置了相同的按钮，它打开了模式窗口，但仅在第二次点击！到底是怎么回事？
我已经尝试了几天的各种事情，但都有最糟糕的副作用。
任何帮助将非常感谢。
infoBox中按钮的HTML：
< div style = ...>
< center>
< button id =open-popup>打开弹出式菜单< / button>
< div id =my-popupclass =mfp-hide white-popup>内联弹出窗口< / div>
< / center>
< / div>
HTML地图div外的按钮HTML：
< button id =open-popup>打开弹出式菜单< / button>
< div id =my-popupclass =mfp-hide white-popup>内联弹出窗口< / div>
JS：
myapp.triggerClick = function（）{
google.maps.event.trigger（gmarkers [id]，click）
};
$ b $ 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/zh-CN/mapfiles/close.gif
，infoBoxClearance：新的Google。 maps.Size（1,1）
，isHidden：false
，窗格：floatPane
，enableEventPropagation：false
};
var ib = new InfoBox（infoboxOptions）;
函数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;
$ b $（document）.on（'click'，'＃open-popup'，function（）{
$（this）.magnificPopup（{
项目：{
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'//这是默认类型
}）;
}）;
尝试在地图事件侦听器中放置jQuery Click事件当单击信息框时，该设置将触发。因为谷歌地图中的点击事件是由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'
}，
类型：'image'//这是默认类型
}）;
}）;
}）;
请注意，我更新了点击事件的选择器。你可能想要玩弄它，因为在我的情况下，通常 on 选择器语法不起作用，例如$（'。c $ c $>'（'。preExistingElementSelector'）。on（'click'，'.dynamicElementSelector'，function（）{}）;
每次显示信息框并关闭
时，信息框都会动态添加并从dom中删除。那么上面的函数实质上是在将新的信息框实例添加到dom（即可见的）之后，向其添加新的点击事件。一旦你关闭了信息框，它就会从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（）{
//通过API
打开magnificPopup //参见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'//这是默认类型
}）;
}）;
}）;
I have an infoBox that opens when clicking on a google maps marker. Inside the infoBox there is a button '#open-popup' that when clicked should to open a magnificPopup modal window but nothing happens.
As a test I have put the same button outside the div containing the google map, which opens the modal window but only on the second click! What is going on?
I have tried all sort of things for days but all have worst side effects.
Any help will be much appreciated.
HTML for button inside infoBox:
<div style=...>
<centre>
<button id="open-popup">Open popup</button>
<div id="my-popup" class="mfp-hide white-popup">Inline popup</div>
</center>
</div>
HTML for button outside google maps div:
<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
});
});
Try placing your jQuery click event inside a map event listener, that is set to fire when an infobox is clicked. A map event listener is needed because click events inside a google map are handled by the Google Map API.
So for you, something like:
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
});
});
});
Notice that I updated the selector for your on click event also. You may want to play around with that as the usual on selector syntax wouldn't work in my case, e.g. $('.preExistingElementSelector').on('click', '.dynamicElementSelector', function(){});
The infobox is dynamically added and removed from the dom every time it is shown and closed. So what the function above is essentially doing is, after the new infobox instance has been added to the dom (i.e. is visible), add this new click event to it. Once you close that infobox, it is removed from the dom which also means that the event handler you attached to it is gone also. Which is why we add a new one each time.
I'm sure there's probably a neater solution out there, I just haven't had time to find one!
Also, make sure to keep enableEventPropagation: false in the infobox options so that the click event doesn't get swallowed by Google maps.
UPDATE
Here is a working example: http://jsfiddle.net/gavinfoley/4WRMc/10/
What you really need to be able to open the magnific popup through the API. So the only change I made was changing
$(this).magnificPopup({...});
to
$.magnificPopup.open({...});
And that solved it.
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
});
});
});
这篇关于Google地图infoBox中的按钮无法打开Magnific-popup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
