Question

我为一个网站制作了2个自定义谷歌地图，并在移动网站上嵌入了iframe：mobile.moodyplumbingmpi.com地图不会显示自定义地图，而是在首次通过贴上服务区域时显示南半球的地图。如果我点击刷新，则会显示正确的地图。想知道我是否缺少某种jquery命令来显示在打开或类似的东西。我完全坚持这个。任何帮助将不胜感激！麦克风以下是显示地图的部分的代码：

BackMoody Plumbing

<article data-role="content">

  <h2>Moody Plumbing Service Area</h2>
  <ul data-role="listview" data-inset="true" data-filter="false">

  <li>
    <h3>Warren Service Areas</h3>
    <iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kQ2ZNNmaryIQ"></iframe><br /><small><a href="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kQ2ZNNmaryIQ" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    </li>

    <li>
    <h3>Youngstown Service Areas</h3>
    <iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kkUe66oIEZgU"></iframe><br /><small><a href="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kkUe66oIEZgU" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    </li>

    </ul>
</article>

<nav data-role="footer">&copy; <script>new Date().getFullYear()>2010&&document.write(+new Date().getFullYear());</script> Moody Plumbing <a href="http://moodyplumbingmpi.com/mobile.php" data-role="button" data-icon="star" data-theme="a">Visit Full Site</a>
</nav>

Answer 1

因此，您的问题是包含地图的iFrame在隐藏时正在构建。这会混淆Google MapsEngine API，它希望视口窗口的大小和可见大小合适。当你从“服务区”按钮切换iFrame的可见性时，MapsEngine只会在lat / lng 0,0的缩放1处向下移动。

我认为一种解决方案是在按下“服务区”按钮时动态重新设置iFrame的SRC。更改两个iFrame标记以包含唯一ID：

<iframe id="location1" width="250" height="250" ...
<iframe id="location2" width="250" height="250" ...

然后在HTML文档的HEAD中添加一个简单的脚本;我没有想到这一点，它来自：Reload an iframe with jQuery

<script type="text/javascript">
$(document).on("pageshow", "#locations", function(event, data) {
    $('#location1').attr('src', function(i, val) { return val; });
    $('#location2').attr('src', function(i, val) { return val; });
});
</script>

重新加载有点跳跃。因此，需要考虑的其他可能选项包括：

在按下“服务区”按钮时动态触发iFrame的刷新;这里有代码在线，但它似乎不适用于所有类型的浏览器。
将几个DIV放入占位符，然后使用javascript将iFrame HTML作为DIV的innerHTML插入。
找到触发地图RESIZE事件的方法[google.maps.event.trigger（???，“resize”）;]类似于以下链接中的一个答案;我不知道使用MapsEngine是否可行：google maps not displayed correctly unless refreshing

您确实需要确定事件的时间安排。在尝试上述任何一项之前，#locations SECTION需要完全可见，以允许MapsEngine初始化正常工作。在调用iFrame之前，您需要设置一个事件以了解SECTION何时可见（jQuery pageshow事件按照上面的代码示例中的说明执行此操作）。

最后，我不确定您是使用Google的MyMaps还是使用Google MapsEngine构建地图。如果您确实使用过MapsEngine，则需要注意Google将于2015年底终止MapsEngine，这两张地图将无法使用。

如果没有刷新，嵌入自定义谷歌地图将无法显示

1 个答案: