一、 開場
很多小夥伴又被公司逼迫的要開發啥離線地圖啥的，我今天就來解決你們的痛苦，其實就是將js下載下來，將js中的加載地圖瓦片路徑改爲自己本地的，下面認真看下去。
二、 步驟
1. 首先到百度地圖API開發平臺：http://lbsyun.baidu.com/index.php ，申請一個應用，現在申請應用是免費的
2. 其次到V3.0 API文檔這 ：http://lbsyun.baidu.com/jsdemo.htm#canvaslayer
將路由src的路徑拷貝到瀏覽器中，在前面加上 https://${src} ，將祕鑰替換爲申請的應用祕鑰，打開是下面這樣的
最後再將本次的src路由拷貝到瀏覽器，就是百度地圖離線API的js文件內容，部分如下圖
再用JS格式化工具格式化：https://tool.oschina.net/codeformat/js/
3. 開始寫代碼了
[1] 創建一個前段項目
將格式化好的JS拷貝到js下面，並且命名爲 bmap_offline_api_min.js
在創建一個getmodules2.0.js，這個主要作用就是本地資源工具js，下面會說到的如何下載工具js，我們先改變0bmap_offline_api_min.js
[2] 寫一個html頁面，index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="js/map3.0_init.js"></script>
<script type="text/javascript" src="js/bmap_offline_api_min.js">
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("container"); // 創建Map實例
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 1); // 初始化地圖,設置中心點座標和地圖級別
map.enableScrollWheelZoom(true); //開啓鼠標滾輪縮放
var json_data = [[116.404,39.915],[110.404, 30.916],[96.404, 39.917]];
var pointArray = new Array();
for(var i=0;i<json_data.length;i++){
var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 創建點
map.addOverlay(marker); //增加點
var infoWindow = new BMap.InfoWindow
("<table class='mytable' border='0' cellspacing='0' cellpadding='0'>"
+ "<tr><td>站點名稱：111"
+ "</td></tr><tr><td>經度：" + json_data[i][0]
+ "</td></tr><tr><td>緯度：" + json_data[i][1]
+ "</td></tr></table>");
pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
marker.addEventListener("mouseover",function(){
this.openInfoWindow(infoWindow);
});
// 鼠標移開標註點要發生的事
marker.addEventListener("mouseout", function () {
this.closeInfoWindow(infoWindow);
});
}
map.addEventListener("zoomend", function(e){
console.log('地圖級別: '+map.getZoom() );
});
</script>
</body>
</html>
[3] 我們通過索引 &mod= 定位到
我們加一個debuge，打開index.html 打開F12會看到下面這個東西，拷貝到 瀏覽器中，地址後面再加一個 &mod="" 如下地址
http://api0.map.bdimg.com/getmodules?v=2.0&t=20140707&mod=marker_w34tq5
mod 哪裏來呢？下面我們在修改這快東西如下
mod其實就是控制檯數組的元素，如果有就要家在一次，加載後呢？加載完之後我們將加載的js放在 getmodules2.0.js 中，如下圖
就這樣將數據加載進來。
[4] 我們通過 main.main_domain_cdn 定位找如下內容
將下面的內容改爲
[5] 修改瓦片加載路徑，老規矩，通過getTilesUrl定位下圖所示的內容
修改爲下圖所示
[6] 上面的js就修改完了，我們再添加一個js map3.0_init.js，這個JS是最先被引入的
/**
* 離線API初始化, 請在加載map3.0.js之前引入
*/
/**
* 這是必須要確認的配置
* 瓦片圖必須是png圖像
*/
var bmapConfig = {
'tiles_path' : '', //顯示普通地圖，爲空默認在 tiles/ 目錄
'tiles_satellite_path': '', //顯示衛星影像，爲空默認在 tiles_satellite/ ，只有底圖沒有地址標註
'tiles_hybrid_path' : '' //顯示帶有街道的衛星影像，爲空默認在 tiles_hybrid/，需和衛星影像配合使用
};
//獲得API主目錄，一般不需要修改
var scripts = document.getElementsByTagName("script");
var _JS__FILE__ = scripts[scripts.length - 1].getAttribute("src");
bmapConfig.home_dir = _JS__FILE__.substr(0, _JS__FILE__.lastIndexOf("/"));
if( bmapConfig.tiles_path.length == 0 ){
bmapConfig.tiles_path = "./fromat";
}
//調試日誌，請保留
function bmapLog(s){
if(typeof console != 'undefined')
console.log('>>> '+s);
}
4. 砸門再說說 InfoWindow，我們就說說多個InfoWindow，解決你們for多個標註，顯示的內容是最後一個的
思路：要閉包
var json_data = [[116.404,39.915,"1"],[110.404, 30.916,"2"],[96.404, 39.917,"3"]];
for(var i=0;i<json_data.length;i++){
var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 創建點
map.addOverlay(marker); //增加點
(function () {
var index = i;
var opts = {
width: 100, // 信息窗口寬度
height: 5
}
var infoWindow = new BMap.InfoWindow(
"<table class='mytable' border='0' cellspacing='0' cellpadding='0'>"
+ "<tr><td>地點：" + json_data[index][2]
+ "</td></tr></table>",opts);
var _marker = marker;
_marker.addEventListener("mouseover", function () {
this.openInfoWindow(infoWindow);
});
_marker.addEventListener("mouseout", function () {
this.closeInfoWindow(infoWindow);
});
})()
}
這裏基本就完了，現在就是加入瓦片了，關注我的公衆號我提供瓦片下載及方法
