google-maps - 使用 Phonegap 离线浏览预先知道的 map

Question

你好，提前谢谢你，

我想问一下是否有一种方法可以编译预先知道的谷歌 map 图块并将它们加载到 Phonegap 应用程序中。

更具体地说，我正在开发一个应用程序，该应用程序将涉及特定区域内的地理定位、路径导航等。由于应用程序的使用性质(例如它可能用于野生动物)，用户的电话可能无法获得信号以进行互联网连接，因此我希望交互式 map 设施即使在手机离线。

我还考虑了如果较早检索 google map ，是否有可能获得缓存的图块。 Phonegap 可以做到这一点吗？

我也对其他 map 服务的任何建议持开放态度，不仅仅是在谷歌 map 上。

Answer 1

我一直在使用 OpenLayers 使用 phonegap 缓存开放街道 map 图块。我使用 PhoneGap-Downloader (https://github.com/phonegap/phonegap-plugins/tree/master/Android/Downloader) 将磁贴存储在文件系统上，并使用 localstorage 将磁贴的 url 映射到文件系统上的位置。在 openlayers 中，我将 OpenLayers.Layer.OSM 子类化以重载 getURLasync 并拦截图块 URL 的设置:

编辑 :在最近版本的 phonegap 中不需要 PhoneGap-Downloader 插件，只需使用 native 文件传输:http://docs.phonegap.com/en/2.3.0/cordova_file_file.md.html#FileTransfer_download

OSMWithLocalStorage = OpenLayers.Class(OpenLayers.Layer.OSM, {
    initialize: function(options) {
        OpenLayers.Layer.OSM.prototype.initialize.apply(this, ["CachedMap"]);
        this.async = true;
        this.isBaseLayer = true;

        this.url = 'http://tile.openstreetmap.org/${z}/${x}/${y}.png';
    },
    getURLasync: function(bounds, scope, prop, callback) {
        var url = OpenLayers.Layer.OSM.prototype.getURL.apply(this, [bounds]);
        var cached = window.localStorage.get(url);

        if(cached){
            scope[prop] = cached;
        }
        else{
            scope[prop] = url;
        }

        callback.apply(scope);
    },
});