實現離線百度地圖

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