製做百度地圖離線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

相關文章
相關標籤/搜索