| 百度地图3.0离线地图教程和echarts的结合使用 | 您所在的位置：网站首页 › 百度地图增加商户地址 › 百度地图3.0离线地图教程和echarts的结合使用 |
百度地图3.0离线地图教程和echarts的结合使用
|
百度地图版本2.0和3.0区别对比 http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/usage 1、找到百度地图的主文件1.1 输入地址：http://api.map.baidu.com/api?v=3.0&ak=您的密钥 找到标签里的scr地址，例如： http://api.map.baidu.com/getscript?v=3.0&ak=&services=&t=20190102163906 复制地址链接，并打开，看到一大串的代码，复制粘贴。 1.2 网上找到js格式化的工具，进行格式化，为方便下一步修改这个js文件，新建一个js文件命名为appiv3.0粘贴进去。格式化的js文件格式如下。 1.3编写一个HTML文件，引用刚刚我们创建的appiv3.0.js，并且初始化一个地图，用这个HTML文件来看它这个js到底用到了哪些模块 百度地图离线 $(document).ready(function(){ var map = new BMap.Map("main"); var point = new BMap.Point(121.20, 31.13); // 创建点坐标 map.centerAndZoom(point,7); map.enableScrollWheelZoom(); // 启用滚轮放大缩小。 map.enableKeyboard(); // 启用键盘操作。 map.setMinZoom(3); map.setMaxZoom(7); }) 新建一个空的js文件，名字自己喜欢就好。
2.1 在appiv3.0js中查找&mod=字符串，找到0 == a.length ? f.LJ() : pa(f.eF.MO + "&mod=" + a.join(",")) 打上断点进行调试，开始运行我们写好的html文件，可以得到f.eF.MO的值为 http://api0.map.bdimg.com/getmodules?v=3.0 这个地址就是主文件获取模块的地址，是之后我们要用到的地址。
2.2 查找&mod=字符串，把0 == a.length ? f.LJ() : pa(f.eF.MO + "&mod=" + a.join(","))注释掉， 改为读自己的刚刚创建的getModules3.0.js空文件,如下： 0 == a.length ? f.LJ() : pa("D://百度地图离线//getModules3.0.js") 2.3 添加一句话把a数组打印出来，这个a数组就是百度地图画图需要调用的模块。
我们运行我们写好的html文件，可以发现a数组被打印出来了。 ps：有的时候打印出来的时候是空数组，先完全刷新一下网页试一下，不行的话开无痕模式运行HTML文件，没有的话也可以多刷新几遍，最后不行的话清除浏览器的所有缓存然后运行多刷新几遍。再没有的话就没办法了，我是一开始运行就有数据出来，后来不知道为什么就为空了，不清楚是什么问题。如果找出问题的所在请告诉我，谢谢。
2.3 我这里打印了三个数组，分别把数组里面的值添到下面的链接(这个链接就是刚刚我们调试出来的url)后面，然后访问，把里面的内容拷出来放到getModules3.0.js文件里。 http://api0.map.bdimg.com/getmodules?v=3.0&mod= 比如第一个值为map_fssuk1，那么如下访问： http://api0.map.bdimg.com/getmodules?v=3.0&mod=map_fssuk1 拷完了之后，继续运行html文件，看它还有没有继续打印出数组，如果有重复上述步骤把，知道刷新到它不打印为止，那么我们需要引用的模块文件就已经下载好了。
2021-06-23更新（关于留言中的获取模块内容为空的问题） 百度api代码不是一成不变的，随着时间的推移，代码也会随之改变（也有可能再过一些时间百度代码大改动这整个方法都没用了也不知道）。模块内容为空的原因就是因为获取模块的地址已经变了，所以不要照抄我的模块地址，要自己去断掉调试看一下自己的地址是什么。 比如今天我看的这个模块地址调试出来的就是 http://api.map.baidu.com/getmodules?v=3.0&mod=
而且打印出来的模块名称也是不一样的
2.4接着在我刚刚创建的appiv3.0js文件中查找utf-8字符串，把e.charset = "utf-8";注释掉。
2.5 在appiv3.0js文件中把D.ka这一句话屏蔽掉，设置D.ka为"";（空字符串） window.BMAP_PROTOCOL && "https" === window.BMAP_PROTOCOL && (window.HOST_TYPE = 2); D.zt = window.HOST_TYPE || "0"; D.url = D.o_[D.zt]; D.Ko = D.url.proto + D.url.domain.baidumap + "/"; D.Rd = D.url.proto + ("2" == D.zt ? D.url.domain.main_domain_nocdn.other: D.url.domain.main_domain_nocdn.baidu) + "/"; D.ka = D.url.proto + ("2" == D.zt ? D.url.domain.main_domain_cdn.other[0] : D.url.domain.main_domain_cdn.baidu[0]) + "/"; D.Ji = D.url.proto + D.url.domain.main_domain_cdn.webmap[0] + "/"; window.BMAP_PROTOCOL && "https" === window.BMAP_PROTOCOL && (window.HOST_TYPE = 2); D.zt = window.HOST_TYPE || "0"; D.url = D.o_[D.zt]; D.Ko = D.url.proto + D.url.domain.baidumap + "/"; D.Rd = D.url.proto + ("2" == D.zt ? D.url.domain.main_domain_nocdn.other: D.url.domain.main_domain_nocdn.baidu) + "/"; // D.ka = D.url.proto + ("2" == D.zt ? D.url.domain.main_domain_cdn.other[0] : D.url.domain.main_domain_cdn.baidu[0]) + "/"; D.ka = ""; D.Ji = D.url.proto + D.url.domain.main_domain_cdn.webmap[0] + "/";（这是百度地图2.0版本的方法，顺带发一下） 在appiv3.0js文件中中把z.ma屏蔽掉，设置z.ma为"";（空字符串） z.Qy = window.HOST_TYPE || "0"; z.url = z.Y_[z.Qy]; z.wp = z.url.proto + z.url.domain.baidumap + "/"; z.wc = z.url.proto + ("2" == z.Qy ? z.url.domain.main_domain_nocdn.other : z.url.domain.main_domain_nocdn.baidu) + "/"; z.ma = z.url.proto + ("2" == z.Qy ? z.url.domain.main_domain_cdn.other[0] : z.url.domain.main_domain_cdn.baidu[0]) + "/"; z.cj = z.url.proto + z.url.domain.main_domain_cdn.webmap[0] + "/"; z.Qy = window.HOST_TYPE || "0"; z.url = z.Y_[z.Qy]; z.wp = z.url.proto + z.url.domain.baidumap + "/"; z.wc = z.url.proto + ("2" == z.Qy ? z.url.domain.main_domain_nocdn.other : z.url.domain.main_domain_nocdn.baidu) + "/"; //z.ma = z.url.proto + ("2" == z.Qy ? z.url.domain.main_domain_cdn.other[0] : z.url.domain.main_domain_cdn.baidu[0]) + "/"; z.ma = ""; z.cj = z.url.proto + z.url.domain.main_domain_cdn.webmap[0] + "/";2.5 修改获取地图瓦片的url，在appiv3.0js文件中查找getTilesUrl字符串，可能有很多个，找到和这个上下文差不多的那个，一般是xx.getTilesUrl。
修改成读自己的地图文件。 Id.getTilesUrl = function(a, b, c) { var x=a.x,y=a.y,e=1,z=a; return "D://百度地图离线//map/"+b+"/"+x+"/"+y+".png"; };再运行html文件，发现地图已经出来了。
2.6 修改图片的url。打开控制台，发现会报错，一些图片找不到，原因是url不对。我们搜索openhand.cur。这个图片是拖动地图的手型图片。
可以看到这些cur格式的图片前面都有个H.oa，那么这个肯定是图片所在的地址了。接着我们搜索var H,可以找到这个Object对象里面有个oa属性为oa: D.ka + "images/"，之前D.ka这个属性已经设置为""了，所以不用管它，我们直接改后面的地址就行了 var H = { XE: 34, YE: 21, ZE: new P(21, 32), XN: new P(10, 32), WN: new P(24, 36), VN: new P(12, 36), VE: new P(13, 1), oa: D.ka + "images/", S2: "http://api0.map.bdimg.com/images/", WE: D.ka + "images/markers_new.png", TN: 24, UN: 73, jB: { "\u5317\u4eac": { sx: "bj", k: new J(116.403874, 39.914889) }, "\u4e0a\u6d77": { sx: "sh", k: new J(121.487899, 31.249162) }, "\u6df1\u5733": { sx: "sz", k: new J(114.025974, 22.546054) }, "\u5e7f\u5dde": { sx: "gz", k: new J(113.30765, 23.120049) } }, fontFamily: "arial,sans-serif" };修改之后的代码： var H = { XE: 34, YE: 21, ZE: new P(21, 32), XN: new P(10, 32), WN: new P(24, 36), VN: new P(12, 36), VE: new P(13, 1), // oa: D.ka + "images/", oa: D.ka + "D:/百度地图离线/images/", S2: "http://api0.map.bdimg.com/images/", WE: D.ka + "images/markers_new.png", TN: 24, UN: 73, jB: { "\u5317\u4eac": { sx: "bj", k: new J(116.403874, 39.914889) }, "\u4e0a\u6d77": { sx: "sh", k: new J(121.487899, 31.249162) }, "\u6df1\u5733": { sx: "sz", k: new J(114.025974, 22.546054) }, "\u5e7f\u5dde": { sx: "gz", k: new J(113.30765, 23.120049) } }, fontFamily: "arial,sans-serif" };
更新百度离线地图添加覆盖物的方法 根据需求需要在离线地图上添加省界边界，也就是多边形覆盖物 我们把自己的自定义离线api appiv3.0.js注释掉，添加上在线地图的api，并添加一个添加边界的方法 百度地图离线 var polygonOverlay = null;//多边形覆盖物 $(document).ready(function(){ var map = new BMap.Map("main"); var point = new BMap.Point(121.20, 31.13); // 创建点坐标 map.centerAndZoom(point,7); map.enableScrollWheelZoom(); // 启用滚轮放大缩小。 map.enableKeyboard(); // 启用键盘操作。 map.setMinZoom(3); map.setMaxZoom(7); getBoundary("广东省",map); }) function getBoundary(boundaryString,bmap){ const bdary = new BMap.Boundary(); bdary.get(boundaryString, function(rs){//获取行政区域 polygonOverlay && bmap.removeOverlay(polygonOverlay); var count = rs.boundaries.length;//行政区域的点有多少个 if (count === 0) { alert('未能获取当前输入行政区域'); return ; } var pointArray = []; for (var i = 0; i < count; i++) { var ply = new BMap.Polygon(rs.boundaries[i], { fillColor:"#000000",fillOpacity:0.01,strokeWeight: 2, strokeColor: "#000000"}); //建立多边形覆盖物 polygonOverlay = ply; bmap.addOverlay(ply);//添加覆盖物 pointArray = pointArray.concat(ply.getPath()); } }); }可以看到在在线地图上是可以添加到的
我们在添加覆盖物的方法 （也就是get方法）打上断点，可以看到在线地图的AP获取行政区域的方法是在在线API上
而在我们自定义API他调用了自己的模块。
同时，在控制台上又看到了一个数组被打印了出来，所以很肯定的判断这个就是获取行政区域，添加覆盖物的模块了
http://api0.map.bdimg.com/getmodules?v=3.0&mod=othersearch_pkjxyz 把上面连接的代码拷贝下来放到我们自己的模块中getModules3.0.js 接着刷新运行一下代码，发现离线覆盖物已经成功添加
添加离线行政区域划分的问题 2020-07-07 更新通过上述方法添加，断网之后是没有效果的。（之前的所谓画出来了,天真的以为没有引用在线API就以为是离线的了,但是后面我网络直接全关了会画不出来） 因为通过上述方法的获取行政区域还是会去读取在线的数据，导致读取失败。
我们可以看到在线地图的getBoundary（）方法也就是去百度服务器获取到一些点，然后调用Polygon方法去画多边形覆盖物而已。 所以我们自己把自己想要的边界的坐标弄下来，通过Polygon这个API自己画。 我们先把网打开。也是先执行getBoundary()。断点调试，可以获取到回调后的数据，也就是这些边界的点数据。
这样的话，我们把这些点打印到控制台，把这些数据放在一个json当中。
然后直接读取这个JSON获取点进行绘制 $.getJSON("guangdongBoundary.json",function(result){ var count = result.boundaries.length; if (count === 0) { alert('未能获取当前输入行政区域'); return ; } var pointArray = []; for (var i = 0; i < count; i++) { var ply = new BMap.Polygon(result.boundaries[i], { fillColor:"#000000",fillOpacity:0.01,strokeWeight: 2, strokeColor: "#000000"}); //建立多边形覆盖物 polygonOverlay = ply; map.addOverlay(ply);//添加覆盖物 } });
总结： 当你想要用在线地图API上的功能时，发现在离线地图上用不了。先使用在线地图API把代码写好，然后再使用离线地图API，他会把相应的缺失模块打印出来，你只要把模块导进自己的模块中，就能够离线使用了。 2020-11-25更新 和echarts的结合使用. 为什么要和echarts结合使用呢? 百度地图上没有丰富的绘制点线功能,有也都是很丑陋的.比如标注,悬停显示的图层 echarts上没有百度地图上的API功能,比如上面说的绘制行政区域,导航之类的. 所以需要两个相互结合使用.echarts上能绘制地图。使用百度API也能绘制地图，这两个地图我们不要弄蒙了。 两者结合使用的时候我们就使用echarts进行地图绘制(echarts有个方法可以获取到百度地图的map实例对象myChart.getModel().getComponent('bmap').getBMap() 百度地图好像没有能够获取echarts的实例对象方法) echarts地图的绘制有几种方式：geo方式和bmap方式。 1、geo也就是自己引入一个js文件，例如china.js。然后参考坐标coordinateSystem："geo", 2、bmap需要引入自己在百度上注册的API,例如http://api.map.baidu.com/api?v=3.0&ak=您的密钥。然后参考坐标coordinateSystem："bmp"。(这个时候我们就可以使用离线的API来用了) 我们使用bmap百度地图的方式， 百度地图离线 /** * 实例添加了echarts的坐标点,百度地图的行政区域以及百度地图的折线绘制 */ var polygonOverlay = null;//多边形覆盖物 var option = { bmap : {//设置为百度地图 center : [113.257478,23.141139], zoom : 7, roam : true, // mapStyle:mapStyle,当你使用在线百度API的时候这里能够定制地图样式.使用离线地图的时候,你的地图瓦片都是本地的图片,所有这个地图样式应该去掉 }, series : [{ name : 'redPoint', type : 'scatter', coordinateSystem : 'bmap',//参考坐标系设置为百度地图 data : [{"value":[113.257478,23.141139],"name":"test1"}], itemStyle : { normal : { color : 'red' } } }] }; $(document).ready(function(){ var myChart = echarts.init(document.getElementById("main")); myChart.setOption(option);//使用echarts设置地图 //需要用到百度地图API的功能的时候,使用echarts自带的方法获取百度API对象 var map = myChart.getModel().getComponent('bmap').getBMap(); var polyline = new BMap.Polyline([ new BMap.Point(113.257478,23.141139), new BMap.Point(114.418808,23.217682), ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5} //蓝色、宽度为6 ); map.addOverlay(polyline); offLineBoundary(map); }) //离线设置行政区域 function offLineBoundary(map){ $.getJSON("/js/map/guangdongBoundary.json",function(result){ var count = result.boundaries.length; if (count === 0) { alert('未能获取当前输入行政区域'); return ; } for (var i = 0; i < count; i++) { var ply = new BMap.Polygon(result.boundaries[i], { fillColor:"#000000",fillOpacity:0.01,strokeWeight: 2, strokeColor: "#000000"}); //建立多边形覆盖物 polygonOverlay = ply; map.addOverlay(ply);//添加覆盖物 } }); }关闭网络进行测试
效果如下:
这里还是有很多的图片还是会去读在线的，但是功能是没问题的。
可能表达上有点仓促导致大家看不懂，功能上应该是没有问题的。有不懂的可以留言。
|
【本文地址】