vue-baidu-map 离线地图制作（不需要修改组件代码）
前言
最近做了一个地图项目，用的技术是vue-baidu-map，临近收尾的时候被告知要做离线版本，真的憋屈。而网上近乎所有的技术博客都是对于原生地图api的，对于vue-baidu-map这个组件的技术博客是没有的（我没找到），难道要我重新写这个项目？不可能！呕心沥血之下，花了小半天时间整出来了，这里记一下，供之后的参考。（不想看教程的直接拉到底，下资源安排）
技术
vue-baidu-map
实现步骤
1、安装vue-baidu-map
npm install vue-baidu-map --save
2、全局或局部使用（这里展示局部使用的）
图中箭头所指为百度api的秘钥
3、下载百度api的js文件,并引入到项目中去（与传统的有所区别）
- 打开项目，按F12，找到如图链接：
- 复制链接在新标签页打开，再按F12打开控制台，点击source，再点击下面的
{}，整理格式
- 找到/node_modouls中，图中的文件夹map，创建myMap.js文件，将第二步整理好格式的代码复制到myMap.js文件中去：
- 打开第三步图中的Map.vue,找到下图中的函数：getMapScript,注释掉框选的
4条语句
- 还是在Map.vue文件的上面引入刚刚的myMap.js文件
import './myMap.js'，至此API文件引入就完成看了
注意：这里引入api只能用require或者import的方式引入，不能再刚刚注释的语句中用相对路径引入，会报错
4、修改API – 屏蔽ak验证
- 打开vscode，用它的搜索功能，输入
Math.random()
找到图中结构的函数
添加一句if (/^http/.test(a)) return;//这里判断一下，如果是调用外部资源就退出去好了；
5、引用本地工具资源
-
搜索
z.url.domain.main_domain_cdn.baidu[0]，找到图中结构的代码，红色箭头是要添加的一句：z.gj = ''，注意：这些代码名可能每个人的都不一样，但是结构都是这样的，注意一点就是了 -
-
创建本地工具资源文件：
getmodules2.js,还是在如图文件夹与myMap.js同级别
-
搜索myMap.js中
&mod=，如图：
注释掉箭头所指，并添加下面的：console.log(a); //这里很重要！帮助我们找到我们需要加载的模块！ 0 == a.length ? e.mL() : pa(import("./getmodules2.js"))注意框选位置引入本地资源的写法，不能直接使用‘./getmodules2.js’，应该用require或者import引入该文件。 -
上一步中有个
console.log(a),打开项目，打开控制台，打开application-localstorage，将其中缓存的资源全部删除delete
-
刷新你自己的项目，显示如图：
注意：此处有一个报错，因为getmodules2.js中有一些东西没有才报这个错的，先不用管它，将下一步做完之后，这个报错会消失 -
链接：
http://api0.map.bdimg.com/getmodules?v=2.0&mod=，在这个后面跟上一步数组中的每一个元素，这个要一个个的来，如：http://api0.map.bdimg.com/getmodules?v=2.0&mod=map_dwi5lw，之后将里面的 内容复制，粘贴到getmodules2.js文件中去，之后就可以进行下一步了：
6、调用本地瓦片资源：
- myMap.js中添加全局变量，作为瓦片的部署路径，注意:
我这边是部署在服务器上的，并不是在本地文件，所以不知道用相对地址的方法是否能成功，添加代码：var imgAdrs = 'http://192.168.0.124:3000/tiles'，这算是瓦片访问的根路径吧，这样写方便后期的修改维护。 - 搜索
getTilesUrl，
这里有几种getTilesUrl ，我试过其中的两种，都实现了
1）使用的时候添加了自定义样式的:mapStyle="mapItem.mapStyle"，应找到这一句并做修改：（注释掉的是原本的）
` au: function (a) {
var b = this.map.oa();
if (!this.map.Wb() && (a ? this.map.B.N_ = a : a = this.map.B.N_,
a))
for (var c = p, c = "2" == z.fz ? [z.url.proto + z.url.domain.main_domain_cdn.other[0] + "/"] : [z.url.proto + z.url.domain.main_domain_cdn.baidu[0] + "/", z.url.proto + z.url.domain.main_domain_cdn.baidu[1] + "/", z.url.proto + z.url.domain.main_domain_cdn.baidu[2] + "/"], d = 0, e; e = this.Tm[d]; d++)
if (e.A_ == o) {
b.k.Zb = 18;
e.getTilesUrl = function (b, d) {
var e = b.x//x
, e = this.map.gb.Kw(e, d).ls
, k = b.y//y
, l = Tb("normal")
, m = 1;
this.map.Tx() && (m = 2);
l = imgAdrs + '/' + d + '/' + e + '/' + k + '.jpg';
// l = "customimage/tile?&x=" + e + "&y=" + k + "&z=" + d + "&udt=" + l + "&scale=" + m + "&ak=" + qa;
// l = a.styleStr ? l + ("&styles=" + encodeURIComponent(a.styleStr)) : l + ("&customid=" + a.style);
return l
// return c[Math.abs(e + k) % c.length] + l
}
;
break
}
}`
但是这个地方有个缺陷，因为据说自定义样式的瓦片图要下载矢量图，但是我这里没有，只是下载的普通的 jpg图片，有兴趣后期可以试一下。
2）普通引入，即没有添加过自定义样式的（没有:mapStyle="mapItem.mapStyle"），找到：
Kd.getTilesUrl = function (a, b, c) {
var d = a.x
, a = a.y
, e = Tb("normal")
, f = 1
, c = Jd[c];
this.map.Tx() && (f = 2);
d = this.map.gb.Kw(d, b).ls;
return imgAdrs+'/'+b+'/'+d+'/'+a+'.jpg'
// return (Id[Math.abs(d + a) % Id.length] + "?qt=vtile&x=" + (d + "").replace(/-/gi, "M") + "&y=" + (a + "").replace(/-/gi, "M") + "&z=" + b + "&styles=" + c + "&scaler=" + f + (6 == x.da.la ? "&color_dep=32&colors=50" : "") + "&udt=" + e + "&from=jsapi2_0").replace(/-(\d+)/gi, "M$1")
}
修改如上面所示
3）最后备注一下瓦片图的引入规则，其实也就是我们下载的瓦片图文件夹的规则：
文件根目录 + '/' + 缩放等级 + '/' + x坐标 + '/' + y坐标 + 瓦片后缀名
参考瓦片链接格式：http://192.168.0.124:3000/tiles/11/355/109.jpg
最后
做完这些就能实现在vue-baidu-map中的离线百度地图了，学习怎么搞离线地图因为是昨天的原因，今天写这篇文章有可能有些东西没回忆起来，如果有你哪里不对的，或者感觉缺失了麻烦指出一下，这里顺便发一下myMap.js和getmodules2.js文件吧，方便之后使用。
注意：
使用前要修改myMap.js这句地址：var imgAdrs = 'http://192.168.0.124:3000/tiles'
直接拿过去用的同志看这里
1、下载文件：本地工具资源和修改好的API
2、解压后放入/node_modules中的这个位置：
3、打开myMap.js这句地址：var imgAdrs = 'http://192.168.0.124:3000/tiles'，这是放问瓦片的目录
4、打开Map.vue:
添加import './myMap.js'
注释掉下图中四句：函数（getMapScript）
5、这样就可以直接用起来了
6、使用时最好不要加自定义样式，这一句去掉，如果想用自定义样式的，这里没效果，并且要按我上面的api进行修改，还得下载矢量地图瓦片（没试过，大概率能干成功）