最近有个离线地图需求，在网上搞了搞看到 某大神写的稿子 很吊，决定试一试。

1. 申请百度地图ak

	首先去百度地图开放平台自行申请ak

2.获取百度地图api代码

 http://api.map.baidu.com/api?v=3.0&ak=自己申请的ak直接再浏览器打开即可获得js代码，我用的是vue所以在public下的static创建baidu-api.js文件存放获取到的js代码。然后在index.html中引入：    <script type="text/JavaScript" src="./static/build.api.js"></script>

3.修改百度地图baidu-api.js

js原本是线上引用，离线地图就要把线上引用的js都下载下来，接下来修改引用文件地址为本地，并下载所用文件

3.1输出缺少js模块名

在js文件中搜索 &mod= 定位到当前 如图修改，每个人 key值可能不同 根据自己代码修改

3.2 拦截http

在文件中搜索Math.random()).toFixed找到类似图片位置，在方法头部添加一行拦截代码
if (/^http/.test(a)) return; //如果是调用外部资源就退出去

3.3设置引用本地资源路径

搜索url.domain.main_domain_cdn 几次定位到下面的代码，每个人的不太一样 基本差不多 凭感觉 问题不大
A.ij = A.url.proto + A.url.domain.main_domain_cdn.webmap[0] + “/”;
修改为
A.ij = ‘’;

window.BMAP_PROTOCOL && "https" === window.BMAP_PROTOCOL && (window.HOST_TYPE = 2);A.Cu = window.HOST_TYPE || "0";A.url = A.Q0[A.Cu];A.Hp = A.url.proto + A.url.domain.baidumap + "/";A.vd = A.url.proto + ("2" == A.Cu ? A.url.domain.main_domain_nocdn.other : A.url.domain.main_domain_nocdn.baidu) + "/";A.pa = A.url.proto + ("2" == A.Cu ? A.url.domain.main_domain_cdn.other[0] : A.url.domain.main_domain_nocdn.baidu) + "/";// A.ij = A.url.proto + A.url.domain.main_domain_cdn.webmap[0] + "/";A.ij = '';

然后就可以在vue页面按文档使用，缺哪个js模块就下载哪个

<template><div id="app"><div ref="mapShow" class="baiduMap" id="mapShow"></div></div>
</template>
export default {data() {return {map: undefined,overView: undefined,marker: undefined,BMap: undefined,}},mounted() {this.$nextTick(() => {this.baiduMap();})},methods: {baiduMap() {this.BMap = BMap;// 创建地图实例this.map = new BMap.Map("mapShow", {minZoom: 4,maxZoom: 13,});// 创建点坐标let point = new BMap.Point(116.397128, 39.916527);//缩略地图控件。this.overView = new BMap.OverviewMapControl({ isOpen: true });//添加控件this.map.addControl(this.overView);//添加一个标注// this.map.addOverlay(this.marker);// 初始化地图，设置中心点坐标和地图级别this.map.centerAndZoom(point, 6);//开启鼠标滚轮缩放this.map.enableScrollWheelZoom(true);var markers = [];var pt1 = new BMap.Point(116.404, 39.925);var pt2 = new BMap.Point(116.397128, 39.916527);var pt3 = new BMap.Point(116.389999, 39.916527);markers.push(new BMap.Marker(pt1));markers.push(new BMap.Marker(pt2));markers.push(new BMap.Marker(pt3));//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。var markerClusterer = new BMapLib.MarkerClusterer(this.map, {markers: markers,minClusterSize: 1,maxZoom: 12,});// 地图加载完成this.map.addEventListener("tilesloaded", function () {console.log("地图加载完毕");});},},
}

3.4 下载缺少js模块

运行代码后在控制太看输出，这里是所需js，如果没有下边会报404，缺啥下啥

在static文件建modules文件夹存放下载的js的模块
模块下载地址：http://api.map.baidu.com/getmodules?v=3.0&mod=模块名
或者使用 3.2 console.log(f.mG.cQ)的输出
获取到js代码在modules下建立同名js文件存放获取到的js代码
如图

4.加载瓦片地图

瓦片数据自行下载，默认已下载。
在static下新建tiles文件夹存放瓦片数据

配置瓦片引用地址
static目录下新建map_load.js文件，定义瓦片路径及瓦片格式即地图api的主目录：

var bmapcfg={'imgext':'.png',//瓦片图的后缀  根据需要修改  一般.jpg  .png'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主目录，./static/

index.html中引入map_load.js文件,要在baidu-api.js文件之前引入该配置文件：

4.1再次修改baidu-api.js文件

再次修改baidu-api.js文件使其引用本地瓦片
在 baidu-api.js 文件中，可以用 getTilesUrl 多找几次，定位到下面代码

Ce.kO = q;Ce.getTilesUrl = function(a, b, c) {var e = a.x, a = a.y, f = Xb("normal"), g = 1, c = Be[c];// this.map.Lx() && (g = 2);// e = this.map.ef.js(e, b).lj;// return (Ae[Math.abs(e + a) % Ae.length] + "?qt=vtile&x=" + (e + "").replace(/-/gi, "M") + "&y=" + (a + "").replace(/-/gi, "M") + "&z=" + b + "&styles=" + c + "&scaler=" + g + (6 == x.ga.oa ? "&color_dep=32&colors=50" : "") + "&udt=" + f + "&from=jsapi3_0").replace(/-(\d+)/gi, "M$1")//加载本地瓦片let tdir = bmapcfg.tiles_dir.length > 0 ? bmapcfg.tiles_dir: bmapcfg.home + "tiles";console.log(tdir + '/' + b + '/' + e + '/' + a + bmapcfg.imgext);return tdir + '/' + b + '/' + e + '/' + a + bmapcfg.imgext; //使用本地的瓦片//};

基本就完成了
瓦片层级越高体积越大 后边会用nginx代理放在服务器上