百度离线地图

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

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代理放在服务器上