离线地图制作工具

king_tt

浏览: 2097968 次
性别:
来自: 深圳

最近访客更多访客>>

u012363178

liangjijiang

jacky_dai

ljmomo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2017-01 ( 5)
2016-12 ( 132)
2016-11 ( 17)
更多存档...

最近有很多朋友都在问我地图下载的工具，其实这样的工具网上已经很多了，搜一下就能找得到，基本原理都是一样：

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>