使用Phonegap离线浏览预先知道的地图

Question

您好,并提前感谢您,

我想问一下是否有办法编译预先知道的谷歌地图图块并在Phonegap应用程序中加载它们.

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

如果之前检索到Google地图,我也会考虑获取缓存切片的可能性.这可能与Phonegap有关吗？

我也对其他地图服务的任何建议持开放态度,不仅仅是谷歌地图.

Answer 1

我一直在使用OpenLayers来缓存带有phonegap的Open Street Map图块.我使用PhoneGap-Downloader(https://github.com/phonegap/phonegap-plugins/tree/master/Android/Downloader)将磁贴存储在文件系统上,并使用localstorage将磁贴的url映射到文件系统上的位置.在openlayers中,我将OpenLayers.Layer.OSM子类化为重载getURLasync并拦截tile URL的设置:

编辑:在最新版本的phonegap中,不需要PhoneGap-Downloader插件,只需使用本机文件传输: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);
    },
});