最近有很多朋友都在问我地图下载的工具，其实这样的工具网上已经很多了，搜一下就能找得到，基本原理都是一样：
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文件，你应该可以看到本地的地图数据，祝你成功！
地图下载目前只是一个测试版，后续可能还会修改，如果你有什么好的想法，也请告诉我。
本程序只用于学习用。