百度地圖案例(二)離線版
注:此離線版就是通過本地的js代替百度提供的js來進行二次開發,並沒有完全實現離線,完全離線請看 百度地圖案例(三)本地圖片版
1.通過http://api.map.baidu.com/api?v=2.0獲取API主文件的鏈接
右鍵新標籤頁打開圖片可查看大圖,紅線部分就是下面那個地址,通過訪問下面那個地址獲取js
訪問此鏈接
http://api.map.baidu.com/getscript?v=2.0&ak=&services=&t=20171220141726
將獲取的js格式化
將格式化過的js保存命名:apiv2.0.min.js
2.去除百度地圖的ak驗證
在apiv2.0.min.js中定位代碼位置,通過查找 Math.random()).toFixed(0)
添加代碼 去掉驗證
if (/^http/.test(a))//這裏判斷一下,如果是調用外部資源就退出去好了
return;
3.設置引用本地工具資源
查找z.url.domain.main_domain_cdn.webmap[0]
z.cj = "" //置爲空
4.創建本地工具資源文件
創建一個getmodules2.0.js文件,存放需要加載的模塊js
需要加載的模塊js獲取方法如下
首先修改apiv2.0.min.js 通過console.log() 輸出需要加載的模塊名字
查找
0 == a.length ?
修改前
修改後 方法名要對應 路徑寫 getmodules2.0.js 相對於 apiv2.0.min.js 的路徑
然後通過控制檯輸出的模塊名去複製粘貼到getmodules2.0.js中
注:每要實現一個功能就要添加一段js (按需加載,如果缺少js功能無法使用且不報錯)
當a這個數組裏面是需要請求的模塊,getmodules2.0.js沒有的,打印出來,通過下面方式獲取,並放到getmodules2.0.js
map_o3b5bq就是a打印出來的模塊名稱,通過這個鏈接獲取
http://api0.map.bdimg.com/getmodules?v=2.0&t=20140707&mod=map_o3b5bq
&mod=後面加的就是模塊名
需要注意的是模塊名稱下劃線後面的好像是隨機生成的,
所以是要前面的map已經包含了,並且功能能夠使用,就不需要在加了
然後完成,引用apiv2.0.min.js進行二次開發
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/apiv2.0.min.js"></script>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container"); // 創建地圖實例
var point = new BMap.Point(116.404, 39.915); // 創建點座標
map.centerAndZoom(point, 15); // 初始化地圖,設置中心點座標和地圖級別
</script>
</body>
</html>
案例demo下載
百度地圖官方demo
百度地圖JavaScript API