最近有很多朋友都在问我地图下载的工具，其实这样的工具网上已经很多了，搜一下就能找得到，基本原理都是一样：
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="//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/roadmap25 //谷歌影像图 maptile/googlemaps/roadmap26 //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文件，你应该可以看到本地的地图数据，祝你成功！
地图下载目前只是一个测试版，后续可能还会修改，如果你有什么好的想法，也请告诉我。
本程序只用于学习用。
作者：LionGIS
邮箱：liongis@163.com
QQ：1366940902
出处：http://liongis.cnblogs.com/
欢迎转载，请在文章页面明显位置给出原文链接。
联系客服
