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

1.首先获取百度 JavaScript APIjavascript

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

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

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

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

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

3.下载百度地图瓦片,这个有不少方法能够获取。好比这个工具:MaptileDownloader网络

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

如今,彻底能够脱离网络使用百度地图了。示例源码以下:post

复制代码
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>
复制代码

 

 


做者: i-gps 
出处: http://www.cnblogs.com/i-gps/ 
欢迎探讨交流Google Maps相关技术,QQ:64445322 QQ群:242284018 
本文版权归做者和博客园共有,欢迎转载,但未经做者赞成必须保留此段声明,且在文章页面明显位置给出原文链接,不然保留追究法律责任的权利。ui

相关文章
相关标签/搜索