实现离线百度地图

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

实现离线百度地图

猜你喜欢