javascript - 重新载入谷歌地图

Question

我的网站上有 3 个不同的谷歌地图，一个用于在台式机、平板电脑和移动设备上查看，当我调整浏览器大小时，人们可能会这样做，现在已经调整大小的新 map 指针不在正确的位置，直到我刷新页面，我只想重新加载 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 会重新加载或刷新

Answer 1

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

$(window).resize(function() {

    // code goes here...

});

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