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>