0

我们的 iOS PhoneGap 应用程序中的 Google Maps API v3 存在问题。

一点历史：我们使用 Phonegap 平台构建了一个大型应用程序，所以大部分应用程序是 HTML5。我们在我们的应用程序中广泛使用了 Google Maps API v3。这些地图显示在我们应用程序的至少 11 个页面上。应用程序架构是这样的，在每次页面转换时，我们都会删除前一页的内容（这是主 index.html 上的一个 DIV）并将其替换为另一个页面的内容，然后执行初始化页面等的脚本.

最初，每次新页面加载时，我们都会初始化 Google 地图：new google.maps.Map(...); 构造函数。但是，我们发现了一个严重的副作用——每次映射初始化时都会出现大量内存泄漏。通过谷歌搜索，我们发现这是一个已知问题，并且 Google Maps API v3 的设计目的不是为了每页初始化地图超过一次，并且为了使地图不泄漏内存，需要重新加载页面，以便浏览器可以清理内存。但是，这种解决方案对我们不起作用，因为这种重新初始化会破坏应用程序架构（单页应用程序）。

因此，为了防止内存泄漏并同时保持架构，我们决定将句柄存储到包含 map 的 div 中，并在该页面再次显示时将其重新输入到页面上。因此，我们为需要显示地图的页面创建了一个地图实例，当显示该页面时，我们将带有初始化地图的 div 附加到页面，设置地图缩放、居中并触发调整大小事件.

page.map.setZoom(14);
page.map.setCenter(coordinates);
google.maps.event.trigger(page.map, 'resize');

这在一段时间内效果很好。泄漏消失了，地图正确显示，但是，再一次，有一段时间......在地图页面之间进行几次转换后，地图开始变得奇怪 - 滚动地图时，地图停止刷新和加载图像因此显示灰色区域。同时，Google 徽标和所有其他信息都显示在正确的位置。标记也显示在正确的位置。通过 Safari Inspector 查看时，我们可以看到应该显示图像的 div 不在地图内。因此，我们怀疑在 DOM 操作（例如，当我们清除页面内容并用新内容替换它时）并恢复地图之后，子元素发生了某些事情或发生了其他事情。

有谁知道在这种情况下我们能做什么？

注意：我们能够在 Mobile Safari 中重复相同的问题，但不能在桌面版 Safari 或 Chrome 中重复。

下面是使用应用程序一段时间后发生的一些屏幕截图。

示例 1 示例 2 在此处输入图像描述

4

1 回答 1

0

如果我正确理解了问题，则需要在 pageshow 上触发调整大小事件。这是一个缩写函数。

        $("div[id=maps]").bind("pageshow", function (e, data) {
            google.maps.event.trigger(map, "resize");

        });

总是对寻找不同的解决方案感兴趣...... http://jsfiddle.net/wptc/y6Kpb/

于 2013-01-16T19:20:29.470 回答