切换几次标签后,标签内的Google地图变得模糊

时间:2019-01-02 15:29:35

标签: javascript jquery google-maps bootstrap-modal

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

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

多次切换标签后,地图显示的背景模糊,但多边形仍正确显示。

一旦渲染了地图,我将使用以下代码触发窗口调整大小事件:

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

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

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

有人知道这是否是Google地图更新的结果吗?或关于如何刷新地图的任何想法?

谢谢

我尝试延迟此通话:

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

带有setTimeout,还尝试使用以下方法在地图上触发调整大小事件:

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

在显示标签后,我尝试设置地图的缩放级别。

此刻我正在构建一个Codepen,但是在那里也无法使用google maps;(

我希望能够随意切换标签多次,而不会使Google地图变得模糊或重新居中或放大/缩小。

1 个答案:

答案 0 :(得分:0)

已修复-该问题是由代码引起的,该代码用于纠正隐藏并通过移动到其他选项卡显示时地图丢失位置的问题:

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

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

删除这些呼叫可解决此问题。