实现离线百度地图

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