實現離線百度地圖

相關例子：

https://github.com/GainLoss/About-the-map

https://github.com/GainLoss/summary/tree/master/aboutMap

 

1.相關百度地圖的資料：

百度地圖分為1.3版本和2.0版本，我用的是2.0版本，但是基本上實現的過程是一樣。

百度地圖api的官網：http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html

百度地圖使用api的demo；http://developer.baidu.com/map/jsdemo.htm#a1_2

以上兩個就可以基本上看到全部的api的使用了。

2.理解什么是離線百度地圖

我用離線百度地圖是因為現在有個項目需要用到地圖，但是使用的時候還不能接入外網，所以只能用離線百度地圖了。

所以離線百度地圖就是在你沒有網絡的時候也可以實現正常打開地圖的。

我們在編寫離線百度地圖的時候，需要准備的東西就是，百度地圖瓦片（也就是地圖背景圖片）、可以離線使用的一個百度地圖api的js文件、必要的百度地圖的api的了解。

這樣就可以編寫代碼了。

3.開始准備下載文件和參考的資料

我在編寫的時候參考的是：https://my.oschina.net/smzd/blog/628173

這位大神寫的里面有一個代碼demo可以直接下載主要要使用的是

apiv2.0.2.min.js---經過改寫的百度地圖api文件，可以離線

findtiles.js---通過經緯度和放大層級計算瓦片

getmodules.js----有的時候apiv2.0.2.min.js這個里面並不包含全部的功能，所以需要將需要的功能的模塊添加到這個文件中。獲取這些模塊代碼的地址是

http://api.map.baidu.com/getmodules?v=1.3&mod=map,oppc,tile,control,marker

里面的mod的后面放置你需要的模塊的名稱。

4.開始編寫代碼

上面獲取到那個demo之后基本上就可以實現離線的百度地圖了

這里面說幾句需要注意的：

（1）：上面的那個demo是不能夠顯示信息框的，所以我們需要自己在getmodules.js里面添加一個infowindow的模塊，如果實在找不到這個模塊，可以在下面的github上面下載一下我的demo。

（2）：瓦片的下載的話上面是自己一個一個的下載的，可以自己重新修改一個代碼改成一次性下載完成的。

5.下載百度地圖的瓦片

我們下載百度地圖瓦片的時候。需要嚴格按照一定的命名規則。要不就會找不到的

我說一下我的做法，因為現在也有好多可以直接下載百度地圖瓦片的軟件。比如太樂地圖、全能電子地圖等。我這兒用的是太樂地圖結合上面說到的自己用代碼下載地圖，同時自己下載瓦片和太樂地圖下載完瓦片之后對照一下，就可以比較迅速的下載完成最多14級的地圖瓦片了。

6.實現一個基本功能的離線百度地圖需要添加哪些功能

基本上實現一個離線百度地圖，有幾個功能是必須的：

標志、繪制圖形、信息框、標志的點擊事件

（1）標志

var p0 =devData[index].x; // var p1 =devData[index].y;//按照原數組的point格式將地圖點坐標的經緯度分別提出來
pointer = new window.BMap.Point(p0, p1); //循環生成新的地圖點
var myIcon = new BMap.Icon("assets/module/map/images/node.png", new BMap.Size(34, 40)); marker = new window.BMap.Marker(pointer,{icon: myIcon}); //按照地圖點坐標生成標記 
map.addOverlay(marker);

（2）繪制圖形

 var polyline = new BMap.Polygon([ new BMap.Point(p0-0.02,p1-0.02), new BMap.Point(p0+0.04,p1), new BMap.Point(p0+0.04,p1-0.02), new BMap.Point(p0-0.02,p1-0.02), new BMap.Point(p0-0.02,p1-0.02), ], {strokeColor:"#333",fillColor:"#efefef",fillColorOpacity:"0.4",strokeWeight:2, strokeOpacity:0.3}); map.addOverlay(polyline);

（3）信息框和標志的點擊事件

var opts = { width : 250,     // 信息窗口寬度
      height: 80,     // 信息窗口高度
      title : "機房信息" , // 信息窗口標題
      enableMessage:true//設置允許信息窗發送短息
}; var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>"+devData[index].con+"</p>",opts); marker.addEventListener("mouseover", function () { this.openInfoWindow(infoWindow); });

改進下載瓦片代碼：https://github.com/GainLoss/summary 里面的baidumap2.0.3