Question

意图：

我有一个单模板jQM页面，我想要列出我们拥有的不同商店。


以下是一个实例：http://bit.ly/WU7N1P


我希望弹出窗口有一个可重复使用的DIV容器，然后在用户点击一个位置或另一个位置时更新嵌套src的{{1}}。我的实现基础来自jQM谷歌地图插件，我已添加到它。

我正在创建一个被点击的位置的纬度和经度参数，然后将其传递到iframe到URL showMap.html iframe文件中以及在iframe中加载Google Map的位置。我还在地图上添加了一个标记，以便用户可以看到商店的确切位置。

问题：

当用户点击按钮打开地图时，似乎有两（2）个弹出窗口被加载？因此，当您关闭地图弹出窗口并且第二个空白弹出窗口仍然存在时，它也需要关闭。

注意：大多数情况下，您可以在第一个“打开的地图”按钮上重新创建此问题，但可能需要点按第二个不同的“打开地图”按钮来重新创建问题

我已经完全坚持了几个星期，我希望有人可以为我解释这个问题。


这也是一个可以使用的jsFiddle。 http://jsfiddle.net/hmQZk/3/

非常感谢你！

WizzyBoom

Answer 1

您的问题出在popupbeforeposition状态和行：

    $('#popupMap iframe').attr('src', 'http://map.matchstickcrew.com/showMap.html?latlng=' + latlng);

我已将其删除并将其放入：

$('.btnShowMap').on('click', function() { 
    latlng = $(this).attr('data-latlng'); 
    $('#popupMap iframe').attr('src', 'http://map.matchstickcrew.com/showMap.html?latlng=' + latlng);
});

以下是一个有效的例子：http://jsfiddle.net/Gajotres/hmQZk/5/

但是如果你想听我的建议，你应该放弃这个iframe解决方案并切换到gMap v3 api。基本上，如果不使用iframe作为代理，您将得到同样的东西。

用于Google地图的jQuery Mobile双弹出窗口联系我们页面

1 个答案: