最近有很多朋友都在問我地圖下載的工具，其實這樣的工具網上已經很多了，搜一下就能找得到，基本原理都是一樣：
1.選擇一定的地圖范圍。
2.選擇需要下載的地圖源。
3.選擇需要下載的等級。
4.開始下載。
只是每一個軟件都會有自己的特點，為了滿足不同的需求而以。其實地圖下載下來后，最主要的目的還是要應用起來，這就需要結合離線地圖的平台.
Google Map API V3.8.6(需要的請跟我聯系) 的版本我在之前就發布過，有需要的請自己下載。今天更詳細的跟大家講一下這兩個步驟如何結合起來。
1.地圖的下載
新制作了一個地圖下載的工具，界面如下，操作其實已經很簡單了，看圖就能明白：
目前地圖下載工具可以支持Mapabc、谷歌矢量圖、谷歌影像圖三種圖進行下載，如果需要更多的圖源，可以跟我聯系。
下載完成后，在應用程序的目錄下會生成一個maptile目錄，這個目錄是存放剛才下載的地圖數據。
2.加載本地數據
地圖數據我們已經下載下來了，我們使用離線版的Google Map API對圖片進行加載：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 6 <link href="mapfiles/css/default.css" rel="stylesheet" type="text/css" /> 7 <title>Google Maps JavaScript API v3 Example: Map Simple</title> 8 <!--script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script--> 9 <script type="text/javascript" src="mapapi3.8.6.js"></script> 10 <script type="text/javascript"> 11 12 function LocalMapType() {} 13 14 LocalMapType.prototype.tileSize = new google.maps.Size(256, 256); 15 LocalMapType.prototype.maxZoom = 19; //地圖顯示最大級別 16 LocalMapType.prototype.minZoom = 1; //地圖顯示最小級別 17 LocalMapType.prototype.name = "本地數據"; 18 LocalMapType.prototype.alt = "顯示本地地圖數據"; 19 LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) { 20 var img = ownerDocument.createElement("img"); 21 img.style.width = this.tileSize.width + "px"; 22 img.style.height = this.tileSize.height + "px"; 23 //地圖存放路徑 24 //谷歌矢量圖 maptile/googlemaps/roadmap 25 //谷歌影像圖 maptile/googlemaps/roadmap 26 //MapABC地圖 maptile/mapabc/ 27 var strURL = "maptile/mapabc/"; 28 strURL += zoom + "/" + coord.x + "/" + coord.y + ".PNG"; 29 30 img.src = strURL; 31 return img; 32 }; 33 34 var localMapType = new LocalMapType(); 35 36 function initialize() { 37 var myLatlng = new google.maps.LatLng(39.900827854566344, 116.38339402421877); 38 var myOptions = { 39 center: myLatlng, 40 zoom: 4, 41 streetViewControl: false, 42 mapTypeControlOptions: { 43 mapTypeIds: [ 44 google.maps.MapTypeId.ROADMAP, 45 google.maps.MapTypeId.HYBRID, 46 google.maps.MapTypeId.SATELLITE, 47 google.maps.MapTypeId.TERRAIN, 48 'locaMap' ] //定義地圖類型 49 } 50 }; 51 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 52 53 map.mapTypes.set('locaMap', localMapType); //綁定本地地圖類型 54 map.setMapTypeId('locaMap'); //指定顯示本地地圖 55 56 //var markerOptions = new google.maps.MarkerOptions({draggable:true}); 57 var marker = new google.maps.Marker({ 58 position: myLatlng, 59 map: map, 60 draggable:true, 61 title:"Hello World!" 62 }); 63 64 var infowindow = new google.maps.InfoWindow( 65 { content:"latlng:" + marker.getPosition().toString(), 66 size: new google.maps.Size(50,50) 67 }); 68 69 google.maps.event.addListener(marker, 'click', function() { 70 infowindow.setContent("latlng:" + marker.getPosition().toUrlValue(6)); 71 infowindow.open(map,marker); 72 }); 73 } 74 </script> 75 </head> 76 <body onload="initialize()"> 77 <div id="map_canvas"></div> 78 </body> 79 80 </html>
示例中是加載本地Mapabc的地圖，如果需要其它的地圖，只需要把路徑改一下即可，如果需要布置到服務器的話，改成服務器地址就行。
地圖下載工具和離線版本我都打成一個包，並附帶了一部分下載的示例數據，解壓后直接打開map-simple.html文件，你應該可以看到本地的地圖數據，祝你成功！
地圖下載目前只是一個測試版，后續可能還會修改，如果你有什么好的想法，也請告訴我。
本程序只用於學習用。