时间戳

首页 > 解决方案 > 切换标签几次后，标签内的谷歌地图变得模糊

javascript - 切换标签几次后，标签内的谷歌地图变得模糊

问题描述

我在引导模式弹出窗口中的不同选项卡内初始化 2 个谷歌地图。

地图在选项卡的显示事件上初始化，并且地图正确显示。地图中心正确显示了一个字段的多边形。

多次切换选项卡后，地图显示背景模糊，但多边形仍正确渲染。

渲染地图后，我使用以下代码触发窗口调整大小事件：

window.dispatchEvent(new Event('resize'));

在选项卡之间来回切换时，地图似乎有时会正确刷新，但只是暂时的。

此功能已经运行了一段时间没有问题，并且最近开始出现这些症状。

有谁知道这是否是谷歌地图更新的结果？或者关于如何刷新地图的任何想法？

谢谢

我试过推迟这个电话：

window.dispatchEvent(new Event('resize'));

使用 setTimeout，还尝试使用以下方法在地图本身上触发调整大小事件：

google.maps.event.trigger(map, 'resize'); //I have read that this call is now retired.

在显示选项卡后，我尝试设置地图的缩放级别。

我目前正在构建一个代码笔，但在那里也遇到了谷歌地图的问题；（

我希望能够多次切换标签，而不会让谷歌地图变得模糊或重新居中或放大/缩小。

标签： javascriptjquerygoogle-mapsbootstrap-modal

解决方案

已修复 - 问题是由用于纠正地图在隐藏和显示时移动到不同选项卡时丢失位置问题的代码引起的：

google.maps.event.trigger(map, 'resize'); //I have read that this call is now retired.

和

window.dispatchEvent(new Event('resize'));

删除这些调用解决了这个问题。

推荐阅读