百度地圖案例(二)離線版

百度地圖案例(二)離線版

注:此離線版就是通過本地的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格式化

通過格式化工具格式化http://tool.chinaz.com/tools/jsformat.aspx

將格式化過的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下載

http://download.csdn.net/download/qq_33668603/10185091

百度地圖官方demo

http://lbsyun.baidu.com/jsdemo.htm#a1_2

百度地圖JavaScript API

http://lbsyun.baidu.com/index.php?title=jspopular

發佈了29 篇原創文章 · 獲贊 26 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章