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);
    },
});

Answer 2

FWIW，预缓存切片违反Google地图服务条款：http://code.google.com/apis/maps/terms.html

最好的办法是使用OpenStreetMaps和其中一个库（如MapsForge）来提前缓存切片。

编辑：使用上面的gmh04代码，我们使用MapsForge库来缓存一组OSM磁贴，然后将其缓存代码合并到PhoneGap插件中，该插件将以base64图像格式提供图像切片（即“数据： image / png; base64，{img data}“）。改变他的getURLAsync方法来调用插件而不是引用localstorage，到目前为止效果很好。

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

2 个答案: