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