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

Posted 2023-05-09

【中文标题】用于 Google 地图的 jQuery Mobile 双弹出联系我们页面

【英文标题】：jQuery Mobile double popup for Google Maps contact us page

【发布时间】：2013-03-16 19:56:47

【问题描述】：

意图：

我有一个单一模板的 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

【参考方案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 作为代理，您将获得相同的结果。

【讨论】：

我之前已经尝试过，当我在 Mobile Safari 上测试它时遇到了同样的问题。因此，我接受了您的建议并设置了 gMap v3 实现，但是我现在也遇到了问题。 1）我似乎无法让变焦有所不同。我正在拍摄“缩放”：12。2）当我点击第一个“打开地图”时，它显示得很好（虽然放大了），但是当我点击不同的“打开地图”时，它并不令人耳目一新。我的脚本全部在 index.html 文件的 中，在这里找到map.matchstickcrew.com（我无法让 jsFiddle 使用插件和 gMap API 外部脚本调用）。有什么想法吗？

我有一个工作示例，看看：jsfiddle.net/Gajotres/7kGdE。告诉我你是否还需要什么。 “当我点击不同的‘打开地图’时”是什么意思？

所以我所说的“打开地图”是map.matchstickcrew.com，你会看到一个商店列表。点击（点击）“Store 1”，然后点击（点击）“打开地图”按钮。您会看到 Store 1 在安纳波利斯某处加载了一个标记（缩小以查看城市）。接下来点击（单击）Store 3，然后点击（单击）“打开地图”按钮。我应该在波士顿地区的某个地方加载一个标记，但它只是加载了安纳波利斯视图上留下的先前状态。我怎样才能每次都刷新？此外，您的版本还不清楚缩放到我的版本。感谢您的帮助！