2012-02-15 45 views
4

您好,感謝你在一個知名的預地圖離線,導航通過使用PhoneGap的

我想問一下,如果有編譯預先知道谷歌地圖瓦片和在PhoneGap的應用程序裝載它們的方式。

更具體地說,我正在開發一個應用程序,該應用程序將涉及特定區域內的地理定位,路徑導航等。由於應用程序的使用性質(例如可能用於野生動物),用戶的手機可能無法獲得信號以便連接互聯網,因此我希望交互式地圖工具可用,即使手機處於離線狀態

我也在考慮如果谷歌地圖早些時候被檢索到了獲取緩存切片的可能性。 Phonegap有可能嗎?

我也開放給其他地圖服務的任何建議,不僅在谷歌地圖上。

回答

9

我一直在使用OpenLayers工作,使用phonegap緩存開放街道地圖圖塊。我使用PhoneGap-Downloader(https://github.com/phonegap/phonegap-plugins/tree/master/Android/Downloader)將文件存儲在文件系統中,並使用localstorage將映射的URL映射到文件系統上的位置。在我的OpenLayers子類OpenLayers.Layer.OSM超載getURLasync和攔截的圖塊網址的設置:

編輯:在最近版本的PhoneGap的就沒有必要爲PhoneGap的,下載的插件,只需要使用本地文件傳輸: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); 
    }, 
}); 
2

FWIW,預緩存磚是針對谷歌地圖服務條款:http://code.google.com/apis/maps/terms.html

你最好的選擇是使用開放街道地圖與庫,如MapsForge的一個沿,緩存磚提前時間。

編輯:使用上面的gmh04代碼,我們使用MapsForge庫來緩存一組OSM切片,然後將它們的緩存代碼合併到PhoneGap插件中,該插件將以base64圖像格式提供圖像切片(即「數據:image/png; base64,{img data}「)。改變他的getURLAsync方法調用插件而不是引用localstorage,目前效果很好。