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

Dear 丶 2021-11-14 14:20 631阅读 0赞

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

1.首先获取百度 JavaScript API

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

![2012112723405828.jpg][]

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

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

![2012112723454678.jpg][]

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

![2012112723510197.jpg][]

![2012112723511783.jpg][]

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

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

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

![2012112723594584.jpg][]

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

![复制代码][copycode.gif]

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         
    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>

![复制代码][copycode.gif]

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

转载于:https://www.cnblogs.com/Jeely/p/11175848.html

[JavaScript API]: https://www.cnblogs.com/i-gps/archive/2012/11/28/2791826.html
[http_api.map.baidu.com_api_v_1.3]: http://api.map.baidu.com/api?v=1.3
[2012112723405828.jpg]: /images/20211114/912dfc28d58046a39fab2931829db371.png
[http_api.map.baidu.com_getscript_v_1.3_key_services_t_20121108061854]: http://api.map.baidu.com/getscript?v=1.3&key=&services=&t=20121108061854
[2012112723454678.jpg]: /images/20211114/8d801a397e384fa699b5d070288332c2.png
[2012112723510197.jpg]: /images/20211114/dea3d12b52dc42d38485dba1ea465dde.png
[2012112723511783.jpg]: /images/20211114/aa54506d4d7b46aca4a563b6bc3386da.png
[MaptileDownloader]: http://www.cnblogs.com/i-gps/archive/2012/06/09/2543332.html
[2012112723594584.jpg]: /images/20211114/f414d3276f10432ea6f35fd38cbf8136.png
[copycode.gif]: /images/20211114/17a7987ebae84b6cad96cc02d0de96c0.png
[i-gps]: http://www.cnblogs.com/i-gps/