最近项目需求中需要使用百度离线地图，查找翻阅资料整理出来的最详细最新的使用步骤（内含地图下载器 - 无水印版）。希望可以帮到你。
1. 获取js文件
打开此链接，点击框中的 js 文件就可以获得百度地图api的 js 代码。点击左下角的图标，整理代码格式。
然后新建 js 文件，将格式化后的代码粘贴进去，命名为 map.js，再然后将此 js 文件放在 vue 项目中，我的放在了 static/map 下。最后，在 vue 项目的启动入口 index.html 的 head 中引入这个js。
2. 修改map.js文件
以下代码会在百度更新有些出入，但基本样式不变，找相似
2.1 查找 Math.random()，定位到以下位置
function ra(a, b) {
if(/^http/.test(a)) return;
// ！！！！！这里加判断，如果是调用外部资源就退出去
if (b) {
var c = (1E5 * Math.random()).toFixed(0);
B._rd["_cbk" + c] = function(a) {
b && b(a);
delete B._rd["_cbk" + c]
}
;
a += "&callback=BMap._rd._cbk" + c
}
var d = H("script", {
type: "text/javascript"
});
d.charset = "utf-8";
var e = window.___abvk ? window.___abvk : Ec("SECKEY_ABVK")
, f = Ec("BMAP_SECKEY");
// , a = a + ("&seckey=" + encodeURIComponent(e + "," + f));
// ！！！！！这里要引掉，不然会报错
d.src = a;
d.addEventListener ? d.addEventListener("load", function(a) {
a = a.target;
a.parentNode.removeChild(a)
}, q) : d.attachEvent && d.attachEvent("onreadystatechange", function() {
var a = window.event.srcElement;
a && ("loaded" === a.readyState || "complete" === a.readyState) && a.parentNode.removeChild(a)
});
setTimeout(function() {
document.getElementsByTagName("head")[0].appendChild(d);
d = p
}, 1)
}2.2 设置引入本地资源路径
B.url.domain.main_domain_nocdn.baidu 全局多查找几次，定位到下面的代码
B.kz = window.HOST_TYPE || "0";
B.url = B.s0[B.kz];
B.Fp = B.url.proto + B.url.domain.baidumap + "/";
B.oc = B.url.proto + ("2" == B.kz ? B.url.domain.main_domain_nocdn.other : B.url.domain.main_domain_nocdn.baidu) + "/";
B.la = 'static/map/' // ！！！！修改
// B.la = B.url.proto + ("2" == B.kz ? B.url.domain.main_domain_cdn.other[0] : B.url.domain.main_domain_nocdn.baidu) + "/";
B.gj = B.url.proto + B.url.domain.main_domain_cdn.webmap[0] + "/";
B.JN = B.url.proto + B.url.domain.panoVerify + "/";
B.Sf = function(a, b) {
var c, d, b = b || "";
switch (a) {
case "main_domain_nocdn":
c = B.oc + b;
break;
case "main_domain_cdn":
c = B.la + b;
break;
default:
d = B.url.domain[a],
"[object Array]" == Object.prototype.toString.call(d) ? (c = [],
x.jc.Fb(d, function(a, d) {
c[d] = B.url.proto + a + "/" + b
})) : c = B.url.proto + B.url.domain[a] + "/" + b
}
return c
}2.3 下载本地资源
所谓本地资源，就是在使用地图时需要用到的一些模块（module），比如图层类，标记类，控件类。
你在地图中用到这些模块时，它会自动加载，因此我们需要先把这些模块的js文件下载下来，保存到本地。我这里是把页面中的js都下载下来了，以备不时只需。
定位到下面的代码
var Fc = {
map: "e2n0fm",
common: "jlxvtp",
style: "bma30x",
tile: "cj2rio",
vectordrawlib: "4jxzso",
newvectordrawlib: "y3150j",
groundoverlay: "0jaelb",
pointcollection: "lx5y2g",
marker: "z011n4",
symbol: "0tzzrj",
canvablepath: "f0ium1",
vmlcontext: "ej1lwf",
markeranimation: "jliqxx",
poly: "3npbm5",
draw: "rujla0",
drawbysvg: "tf4fal",
drawbyvml: "jcodl3",
drawbycanvas: "0dkwpn",
infowindow: "wzr3ei",
oppc: "yet1s3",
opmb: "obnpmo",
menu: "ylfr4a",
control: "0f3itb",
navictrl: "i3yt10",
geoctrl: "vfmmu5",
copyrightctrl: "ebvxlr",
citylistcontrol: "j4yzdz",
scommon: "rf35sx",
local: "ii5goe",
route: "w4ds5m",
othersearch: "cxnese",
mapclick: "ifnz0n",
buslinesearch: "43am5j",
hotspot: "1lfkfx",
autocomplete: "0dkrlt",
coordtrans: "mgpahl",
coordtransutils: "udjlrm",
convertor: "3tbyma",
clayer: "czihnq",
pservice: "tptfcz",
pcommon: "cvjnoa",
panorama: "jrlkoj",
panoramaflash: "o2yrgq",
vector: "ohmtlw"
};使用 http://api0.map.bdimg.com/getmodules?v=2.0&mod= 冒号前的字段_冒号后的字段 ，在浏览器地址栏输入后回车查看到相应js文件后，新建 static/map/modules 文件夹保存到此文件夹，命名为 冒号前的字段_冒号后的字段。
2.4 引用本地资源
定位到下面的代码，做如下修改：
load: function(a, b, c) {
var d = this.kb(a);
if (d.Dd == this.Lj.mq)
c && b();
else {
if (d.Dd == this.Lj.IG) {
this.EK(a);
this.TN(a);
var e = this;
e.UC == q && (e.UC = o,
setTimeout(function() {
for (var a = [], b = 0, c = e.Sd.Nn.length; b 0) {
for (var i=0; i<a.length; i++) {
mf = 'static/map/modules/' + a[i] + '.js'
ra(mf)
// 修改这部分代码
// console.log('加载模块文件：'+mf);
// 打印后可查看路径是否正确
}
} else {
e.pL()
}
}, 1));
d.Dd = this.Lj.eQ
}
d.bv.push(b)
}
},3. 下载离线瓦片地址
离线瓦片可以理解为地图离线包，没有它，离线地图无法显示的。
下载地图加载器，安装后下载地图瓦片。这里就不介绍工具的使用了，下载完之后可放在 static/map/tiles 目录里，下载几级的瓦片地图就显示到几级。
3.1 配置瓦片地址
新建 static/map/map_loader.js 文件
var bmapcfg = {
'imgext' : '.png', //瓦片图的后缀 根据需要修改，一般是 .png .jpg
'tiles_dir' : '', //普通瓦片图的地址，为空默认在tiles/ 目录
};
var scripts = document.getElementsByTagName("script");
var JS__FILE__ = scripts[scripts.length - 1].getAttribute("src"); //获得当前js文件路径
bmapcfg.home = JS__FILE__.substr(0, JS__FILE__.lastIndexOf("/")+1); //地图API主目录在 index.html 文件中引入
3.2 修改API文件加载瓦片路径
Vd.getTilesUrl = function(a, b, c) {
var d = a.x
, a = a.y
, e = Ub("normal")
, f = 1
, c = Ud[c];
// this.map.Xx() && (f = 2);
// d = this.map.gb.os(d, b).nm;
// return (Td[Math.abs(d + a) % Td.length] + "?qt=vtile&x=" + (d + "").replace(/-/gi, "M") + "&y=" + (a + "").replace(/-/gi, "M") + "&z=" + b + "&styles=" + c + "&scaler=" + f + (6 == x.da.ma ? "&color_dep=32&colors=50" : "") + "&udt=" + e + "&from=jsapi2_0").replace(/-(d+)/gi, "M$1")
// tdir = 'static/map/tiles'
// return tdir + '/' + b + '/' + d + '/' + a + '.png'
let tdir = bmapcfg.tiles_dir.length>0?bmapcfg.tiles_dir:bmapcfg.home + "tiles";
// console.log(tdir + "/" + b + "/" + d + "/" + a + bmapcfg.imgext);
// 可以打印看看瓦片图片地址是否正确
return tdir + "/" + b + "/" + d + "/" + a + bmapcfg.imgext; // 使用本地的瓦片
}ps：地图不能显示出来，是瓦片相关有问题
地图的功能不能实现，是模块相关有问题
4. Nginx反向代理
如果你下载的瓦片图片太多，导致项目过于卡，可以使用Nginx反向代理进行解决。
server {
#nginx代理端口
listen 9090;
#nginx代理名称，可以写域名或者ip，也可以写多个
server_name localhost;
root C:/Users/Administrator/Desktop/百度离线地图项目/bmap/;#百度离线的路经 用于nginx代理访问 相对于当前服务的位置
location / {
# 跨域问题
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
}
add_header Cache-Control "no-cache,must-revalidate"; #解决缓存问题var bmapcfg = {
'imgext': '.png', // 瓦片图的后缀 根据需要修改，一般是 .png .jpg
'tiles_dir': 'http://127.0.0.1:9090' // 普通瓦片图的地址，为空默认在tiles/ 目录
};
var scripts = document.getElementsByTagName('script');
var JS__FILE__ = scripts[scripts.length - 1].getAttribute('src'); // 获得当前js文件路径
bmapcfg.home = JS__FILE__.substr(0, JS__FILE__.lastIndexOf('/') + 1); // 地图API主目录
链接：https://pan.baidu.com/s/1IYuSjop1KmowRumPHmHzZQ
提取码：8ord
配置完如果还是不可以使用的，可以在此百度网盘链接中下载完整的压缩文件，包含 map.js 与 map_loader.js 文件与8，9级无水印瓦片地图。
完整项目目录
多标记示例
export default {
data() {
return {
map: undefined,
overView: undefined,
marker: undefined,
BMap: undefined,
markerArr: [
{
position: {
lng: '116.403963',
lat: '39.915119'
}
},
{
position: {
lng: '114.838532',
lat: '40.818898'
}
},
{
position: {
lng: '116.686553',
lat: '39.543145'
}
},
{
position: {
lng: '115.99599',
lat: '39.487724'
}
},
]
}
},
mounted() {
this.$nextTick(() => {
this.baiduMap()
})
},
methods: {
baiduMap(){
// debugger
this.BMap = BMap;
// 创建地图实例
this.map = new BMap.Map("mapShow");
// 创建点坐标
let point = new BMap.Point(116.403963,39.915119);
//创建标注
for(var i = 0; i < this.markerArr.length; i++){
var pt = new BMap.Point(this.markerArr[i].position.lng, this.markerArr[i].position.lat);
var marker = new BMap.Marker(pt);
this.map.addOverlay(marker);
}
//缩略地图控件。
this.overView=new BMap.OverviewMapControl({isOpen: true});
//添加控件
this.map.addControl(this.overView);
// 初始化地图，设置中心点坐标和地图级别
this.map.centerAndZoom(point, 9);
//开启鼠标滚轮缩放
this.map.enableScrollWheelZoom(false);
},
},
}
// 地图一定要设置尺寸，不然无法显示
.baiduMap {
width: 100%;
height: 100%;
}
// 隐藏地图左下角版权
.anchorBL {
display: none;
}
效果
本文是我亲自爬坑经历，希望能对你有所帮助。编写文章不易，希望大家多多点赞打赏！
（声明：本人前端小白，发文章只为记录自己学习过程，如果文中有什么错误欢迎大家指出。）
如果觉得这篇文章帮助了你，关注、点赞或者打赏一下都是可以的(*^▽^*)
本文参考 vue集合离线百度地图(原创)
对作者表示感谢！
