百度地图版本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=您的密钥

找到<script type="text/javascript">标签里的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到底用到了哪些模块


<!DOCTYPE html>
<html>
<head>
<title>百度地图离线</title>
<script type="text/javascript" src="D://百度地图离线//jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="D://百度地图离线//appiv3.0.js"></script>
</head><script type="text/javascript">$(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);})</script>
<body><div id="main" style="width: 700px;height: 300px;"></div>
</body>
</html>

新建一个空的js文件，名字自己喜欢就好。

2、修改appiv3.0.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。这个图片是拖动地图的手型图片。

z.ca.Je ? (z.extend(H, {rJ: "url(" + H.oa + "ruler.cur),crosshair",tc: "-moz-grab",xd: "-moz-grabbing"}), z.platform.dL && (H.fontFamily = "arial,simsun,sans-serif")) : z.ca.Kv || z.ca.Bx ? z.extend(H, {rJ: "url(" + H.oa + "ruler.cur) 2 6,crosshair",tc: "url(" + H.oa + "openhand.cur) 8 8,default",xd: "url(" + H.oa + "closedhand.cur) 8 8,move"}) : z.extend(H, {rJ: "url(" + H.oa + "ruler.cur),crosshair",tc: "url(" + H.oa + "openhand.cur),default",xd: "url(" + H.oa + "closedhand.cur),move"});

可以看到这些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，并添加一个添加边界的方法

<!DOCTYPE html>
<html>
<head>
<title>百度地图离线</title>
<script type="text/javascript" src="D://百度地图离线//jquery-1.8.3.min.js"></script>
<!-- <script type="text/javascript" src="D://百度地图离线//appiv3.0.js"></script> -->
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=您的ak"></script>
</head><script type="text/javascript">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());}    });   }</script>
<body><div id="main" style="width: 700px;height: 300px;"></div>
</body>
</html>

可以看到在在线地图上是可以添加到的

我们在添加覆盖物的方法（也就是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百度地图的方式，

<!DOCTYPE html>
<html>
<head><title>百度地图离线</title><script type="text/javascript" src="/js/jquery/3.5.1.js"></script><script src="/js/echarts/echarts.min.js" type="text/javascript"></script><script src="/js/echarts/bmap.min.js" type="text/javascript"></script><script type="text/javascript" src="/js/map/appiv3.0.js"></script>
</head>
<script type="text/javascript">/*** 实例添加了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);//添加覆盖物}});}
</script>
<body><div id="main" style="width: 700px;height: 300px;"></div>
</body>
</html>

关闭网络进行测试

效果如下:

这里还是有很多的图片还是会去读在线的，但是功能是没问题的。

可能表达上有点仓促导致大家看不懂，功能上应该是没有问题的。有不懂的可以留言。

百度地图3.0离线地图教程和echarts的结合使用相关推荐

离线地图开发--BigeMap(离线地图服务器构建，支持百度、谷歌、高德等地图)
前言: 目前高德地图以及百度谷歌等地图对Web端离线功能支持不太友好(甚至没有离线地图功能),这致使我们在进行内网服务器使用的地图开发时非常的不便利,因此在进行离线地图开发时我们通常选择引入第三方地图 ...
仿滴滴打车地图选点(包含地图选点，离线地图，导航路线)
根据项目的需要今天做一个百度地图得功能: 百度地图API使用详解 1.百度地图状态改变监听,用户拖动地图(可以设置只能在半径范围内活动)可以实时展示经纬度 2.接入全国各省市离线 ...
echarts地图api series_百度地图2.0离线版与echarts结合
由于客户需求,之前使用的json形式的可钻取型地图被放弃了,要好看,没有网-,于是开启了打地鼠(bug)模式,总结如下: 网上搜索,百度离线地图资料很有限啊,可以用的几个要么年代久远,要么不能满足需求 ...
C# .NET winform地图开发GMap离线地图在线地图自建地图服务器
目录添加GMap引用下载GMap demo 尝试一个测试程序下载离线地图使用离线模式读取地图加载高德地图获取WMTS 坐标系转化 GMap常用地图操作自建地图服务器添加GMap引用下 ...
android osm 离线地图,android openStreetMap 离线地图
一 Mobile_Atlas_Creator_1.8的使用 png1.png 1.Map source 选择Microsoft Maps China(因为其他地图源都不怎么行,没开APN的问题?) 2 ...
osmdroid 地图加载离线地图资源包 zip格式
osmdroid 加载离线地图资源包.我这只用了zip的.其他格式没试. storage/emulated/0/osmdroid/hefeiosm.zip 主要逻辑是,拷贝 hefeiosm.zip ...
百度地图2.0离线版的制作
DEMO下载:http://download.csdn.net/detail/a312024054/9860770 感谢前辈共享出来,不过时间有点长了,有些细节有些变动,修改了一下转载 : http ...
Osm地图osmdroid下载离线地图，第三方瓦片地图
final MapTileProviderBasic tileProvider = new MapTileProviderBasic(getContext().getApplicationContex ...
QT百度离线地图（一）
离线地图的实现方式基本就瓦片图了,找了很多瓦片图下载的工具,要么有水印要么就收费... 最后找到了太乐地图5.0.5的一个破解版可以用,具体怎么破解压缩包里边都有了,使用时先拔掉网线(不然会自动更新, ...

百度地图3.0离线地图教程和echarts的结合使用

1、找到百度地图的主文件

2、修改appiv3.0.js文件

更新百度离线地图添加覆盖物的方法

2020-07-07 更新

总结：

2020-11-25更新和echarts的结合使用.

百度地图3.0离线地图教程和echarts的结合使用相关推荐

最新文章

热门文章

百度地图3.0离线地图教程和echarts的结合使用

1、找到百度地图的主文件

2、修改appiv3.0.js文件

更新百度离线地图添加覆盖物的方法

2020-07-07 更新

总结：

2020-11-25更新 和echarts的结合使用.

百度地图3.0离线地图教程和echarts的结合使用相关推荐

最新文章

热门文章

2020-11-25更新和echarts的结合使用.