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

最新推荐文章于 2025-10-17 15:40:13 发布

转载最新推荐文章于 2025-10-17 15:40:13 发布 · 5.4k 阅读

本文详细介绍如何搭建百度离线地图系统，包括获取百度JavaScript API、修改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>