制作百度地图离线JavaScript API加载本地瓦片地图

原文地址为: 制作百度地图离线JavaScript API加载本地瓦片地图

1.首先获取百度 JavaScript API

首先用浏览器打开 http://api.map.baidu.com/api?v=1.3 如下图所示

其中 http://api.map.baidu.com/getscript?v=1.3&key=&services=&t=20121108061854 这个链接就是我们要找的API文件,

同样在浏览器中打开它,并另存为诸如“apiv1.3.min.js”

还有百度地图必须的一些控件,光标,logo之类的图片也下载下来

2.修改“apiv1.3.min.js”把里面的地图控件的图片,光标,logo等链接替换成本地的。

3.下载百度地图瓦片,这个有很多方法可以获取。比如这个工具:MaptileDownloader

4.开始使用离线地图api加载本地的地图切片

现在,完全可以脱离网络使用百度地图了。示例源码如下:

 1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>百度离线地图演示</title>
7 <script type="text/javascript" src="js/apiv1.3.min.js"></script>
8 <script type="text/javascript" src="js/map,oppc,navictrl,tile,copyrightctrl"></script>
9 <!--script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script-->
10 <link rel="stylesheet" type="text/css" href="bmap.css" />
11 </head>
12
13 <body>
14 <div style="left:0;top:0;width:100%;height:100%;position:absolute;" id="container"></div>
15 </body>
16
17 </html>
18 <script type="text/javascript">
19 var tileLayer = new BMap.TileLayer({
20 isTransparentPng: true
21 });
22 tileLayer.getTilesUrl = function (tileCoord, zoom) {
23 var x = tileCoord.x;
24 var y = tileCoord.y;
25 return 'maptile/' + zoom + '/' + x + '/' + y + '.png';
26 }
27
28 var map = new BMap.Map('container');
29 map.addTileLayer(tileLayer);
30 map.addControl(new BMap.NavigationControl());
31 map.centerAndZoom(new BMap.Point(100.675, 39.007978), 5);
32 map.enableScrollWheelZoom(); //启用滚轮放大缩小
33 map.enableKeyboard(); //启用键盘操作,默认禁用。键盘的上、下、左、右键可连续移动地图。
34 map.enableContinuousZoom();//启用连续缩放效果
35
36 var copyCtrl = new BMap.CopyrightControl({
37 anchor: BMAP_ANCHOR_BOTTOM_RIGHT
38 });
39 copyCtrl.addCopyright({
40 id: 1,
41 content: "http://maptiledownloader.googlecode.com 百度离线地图演示"
42 });
43 map.addControl(copyCtrl);
44 </script>

转载请注明本文地址: 制作百度地图离线JavaScript API加载本地瓦片地图

猜你喜欢

转载自blog.csdn.net/linjcai/article/details/81458121