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: true21 });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_RIGHT38 });39 copyCtrl.addCopyright({40 id: 1,41 content: "http://maptiledownloader.googlecode.com 百度離線地圖示範"42 });43 map.addControl(copyCtrl);44 </script>