百度地圖案例(三)本地圖片版

本案例具有一定侷限性,通過中心點和縮放等級,把百度地圖底圖下載,載入本地圖片來代替網路資源載入,如果需求需要移動和縮放功能,可以去查詢瓦片地圖相關文件。

此案例在百度地圖案例(二)離線版基礎上進行修改即可達到載入本地地圖的功能

1.首先在百度地圖案例(二)離線版的demo上進行修改,開啟控制檯去看網路請求

這裡寫圖片描述

訪問底圖地址即可檢視底圖,然後我們右鍵另存為(命名規則看下列敘述)

這裡寫圖片描述

2.儲存完底圖之後,地圖初始化的時候需要進行修改一下

這裡寫圖片描述

    var map = new BMap.Map("container");          // 建立地圖例項
/*百度地圖離線*/
var outputPath = '.\\img\\';    //地圖瓦片所在的資料夾
var fromat = ".png";    //格式
var tileLayer = new BMap.TileLayer();
tileLayer.getTilesUrl = function (tileCoord, zoom) {
var x = tileCoord.x;
var y = tileCoord.y;
var url = outputPath   zoom   '_'   x   '_'   y   fromat;
console.log("url"   url);//這裡很重要
return url;
}
var tileMapType = new BMap.MapType('tileMapType', tileLayer);
map.setMapType(tileMapType);

這裡說一下我儲存的圖片規則為 縮放等級_x_y.format

這裡的規則可以隨意定義 只要跟我們的圖片一一對應就可以
按照底圖從第一張到最後一張全部儲存,名字根據console.log(url)複製然後貼上

3.需要在apiv2.0.min.js中搜尋z.url.domain.main_domain_cdn.webmap[0]

新增z.ma = “.\/img\/”; //圖片的相對路徑

這裡寫圖片描述

控制檯輸出第一條對應請求底圖的第一張圖

.\img\為圖片的相對路徑

這裡寫圖片描述

這裡寫圖片描述

修改過的z.ma會讓所有需要載入的圖片都去我們寫好的路徑中去尋找,開啟控制檯的請求頁面,哪裡請求404都去另存為儲存到路徑當中,這時我們需要一個聯網版的去一一匹配。

4.然後去固定中心點和縮放等級

這裡寫圖片描述

5.這裡設定禁止縮放和禁止拖拽

這裡寫圖片描述

然後就可以去實現完全無網的情況下去二次開發百度地圖了

demo資源下載

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

百度地圖官方demo

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

百度地圖JavaScript API

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