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

Question

意图：

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

这是一个活生生的例子：http://bit.ly/WU7N1P

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

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

---

问题：

当用户点击按钮打开地图时，似乎有两 (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 作为代理，您将获得相同的结果。