重新加载谷歌地图

Posted 2023-02-22

【中文标题】重新加载谷歌地图

【英文标题】：Reloading google map

【发布时间】：2013-03-01 13:06:02

【问题描述】：

我的网站上有 3 种不同的谷歌地图，一种用于在台式机、平板电脑和移动设备上查看时，当我调整浏览器的大小时，人们可能会执行现在调整大小的新地图指针不在正确的位置，直到我刷新页面，我只想重新加载 iframe，我对 javascript 很陌生，尝试过这个，但它不起作用

<script type="text/javascript">
            if( $(window).width() == 985)

                document.getElementById('map-desk').contentWindow.location.reload(true);
            

            if( $(window).width() == 975)

                document.getElementById('map-tab').contentWindow.location.reload(true);
            

            if( $(window).width() == 765)

                document.getElementById('map-mob').contentWindow.location.reload(true);
            

        </script>

就像当屏幕等于某个宽度时，具有该 ID 的 iframe 会重新加载或刷新

【参考方案1】：

没有实际的事件处理程序，因此它只会在浏览器加载时触发一次（这显然不是您想要的）。当您使用 jQuery 时，请将您的代码包装在：

$(window).resize(function() 

    // code goes here...

);

... 每次浏览器大小发生微小变化时都会运行代码。尽管您会遇到$(window).width() 很少会达到精确 像素值的问题。我不确定最佳解决方案，但涉及检查条件 +/- 30 像素的方法可能会起作用。

【参考方案2】：

我认为您正在 jQuery 中寻找以下事件

window.onresize = function(event) 
  //your code to resize and reload here

【参考方案3】：

如果调整了 mapdiv 的大小，Google 地图会自行重新加载。给 mapdiv 100% 的宽度。它将适合窗口的大小。如果您想更改地图的内容（图层、标记、路线...），您应该使用谷歌地图事件。这里列出了事件、选项和方法：https://developers.google.com/maps/documentation/javascript/reference