谷歌地图 imageMapType 崩溃 iOS Safari答案

【问题标题】：google map imageMapType crashes iOS safari谷歌地图 imageMapType 崩溃 iOS Safari
【发布时间】：2014-09-29 12:19:05
【问题描述】：

我正在将自定义 png 图块加载到谷歌地图上，似乎性能正在扼杀 iOS Safari 中的应用程序，并使其与大多数其他浏览器一起爬行。我相信这是由于加载到地图上的图块数量（加载 73 个伊利诺伊州县，图块数量取决于缩放级别），以及 iOS 为 Safari 提供的内存量有限。

首先，我只是为我拥有的图块创建一个新的 imageMapType 叠加层，而不是尝试使用 google.maps.LatLngBounds.intersects 检索屏幕上每个图块的图像

        function createBoundedTileLayer(sourceUrl, bounds) {
        var imageMapType = new google.maps.ImageMapType({
            getTileUrl: function (coord, zoom) {
                var tileBounds = getTileBounds(coord, zoom);
                if (bounds.intersects(tileBounds)) {
                    return app.stringFormat(sourceUrl, coord.x, coord.y, zoom);
                }
                return null;
            },
            tileSize: new google.maps.Size(256, 256),
            isPng: true,
            opacity: 0.7
        });
        return imageMapType;
    }

    function getTileBounds(coord, zoom) {
        var mapSize = Math.pow(2, zoom);
        var west = ((coord.x * 360) / mapSize) - 180;
        var east = (((coord.x + 1) * 360) / mapSize) - 180;

        var efactor = Math.exp((0.5 - coord.y / mapSize) * 4 * Math.PI);
        var north = (Math.asin((efactor - 1) / (efactor + 1))) * (180 / Math.PI);

        efactor = Math.exp((0.5 - (coord.y + 1) / mapSize) * 4 * Math.PI);
        var south = (Math.asin((efactor - 1) / (efactor +1))) * (180/Math.PI);

        return new google.maps.LatLngBounds(new google.maps.LatLng(south, west), new google.maps.LatLng(north, east));
    }

其次，对于“桌面”浏览器，我同时加载所有图块并且它不会崩溃（只是在我缩放或平移地图时爬行）。对于移动浏览器，为了停止崩溃行为，我一次只为 5 个县加载足够的图块，使用 setTimeout 2000 毫秒，然后循环加载 5 个以上的县，直到加载所有 73 个县。

有没有人用谷歌地图解决过这个问题？提前致谢！

【问题讨论】：

也许您需要查看服务器端的 Google Maps Engine，这不会为 javascript 虚拟机使用那么多 RAM。
@xmux，我对 Google Maps Engine 知之甚少，除了自从发表此评论以来我所查看的内容。我需要将我的图块推送到谷歌服务器然后加载它们吗？这是一个准确的评估吗？
您可以将您的图块推送/上传到 Google 地图引擎，甚至可以为其提供位置。这很简单，然后您需要搜索 GME API，这样您就可以取回图层

标签： javascript ios google-maps-api-3 mobile-safari

【解决方案1】：

@xmux 部分就在这里。虽然他建议 Google Maps Engine 让服务器渲染图块，这可能也解决了这个问题，但他对 JavaScript 虚拟机使用的 RAM 量的评论才是真正的解决方案。

这 73 个县被加载到地图上的 73 个层中。显然，对于内存有限的设备，这永远不会奏效。我们最终解决此问题的方法是在用户放大到足以读取自定义图层的内容（> 12）之前不显示此自定义图层。然后，仅获取恰好适合此视口的县。在获得自定义图层之前缩放这么高，最多可以将 5 个图层添加到地图中。

为了更好的内存管理，这可能会减少到更少的层，在显示覆盖之前缩放级别更高。

此外，在缩小或平移后，请自行清理。除非您告诉它们消失，否则这些叠加层将永远留在地图上。

故事的寓意是——想想内存管理并自己清理。谢谢，@xmux！

【讨论】：