百度离线地图步骤
链接
先附上链接，下面会用到：百度地图传送门
项目结构
第一步
打开百度地图传送门，找到图1这个接口，该接口的response写了百度地图引入的API文件
//response内容如下 (function(){ window.BMap_loadScriptTime = (new Date).getTime(); document.write('<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=E4805d16520de693a3fe707cdc962045&services=&t=20190622163250"></script>');})();
拿到response里面的src地址，浏览器打开之后是压缩的格式，打开控制台，点击图2的大括号按钮，就可以把代码格式化
然后文件保存到本地，重命名为map.js。
第二步
- 搜索
oa(a，找到下面的内容，修改内容如图，目的是为了屏蔽ak验证。
- 搜索
z.url.domain.main_domain_nocdn.other，找到下面的内容，修改为如图。
z.ma后面的路径根据具体情况修改，该项目的离线地图项目结构见上方，z.ma的最终目的是引入images。
补充一句，图上没有，下面的z.cj =
z.url.proto + z.url.domain.main_domain_cdn.webmap[0] + "/";这一句下面，再加一句z.cj = '';, 查到资料，得加这么一句话
- 搜索
&mod，找到下面的内容，并修改
- 搜索
qt=vtile，找到下面的内容，并修改
第三步
查看地图引入的所有模块
在map.js中找到下面内容，即为百度地图的所有模块，可以根据需要下载。
下载模块对应的JS文件
- 打开上面百度地图地址
- 左侧菜单随便选，从控制台找到下面这个接口
3.保存文件，重命名为刚才的"模块_字符串".js保存到modules文件夹里。
比如，要使用 map.js 的 marker 模块，map.js 文件里 marker 模块对应的字符串是 jkmdsc， 那就访问 http://api0.map.bdimg.com/getmodules?v=2.0&t=20140707&mod=marker_jkmdsc，重命名为 marker_jkmdsc.js ，放到 modules 文件夹里就好了。
- 获取地图瓦片 使用
全能电子地图下载器下载所需地图，软件下载地址：全能电子地图下载器传送门 - 下载之后是类似于下图的文件结构，一个文件夹对应一个缩放级别的地图。
第四步
新建map_loader.js文件
//map_loader.js (function() { window.BMap_loadScriptTime = new Date().getTime(); window.BMap = window.BMap || {}; window.BMap.apiLoad = function() { delete window.BMap.apiLoad; }; document.write("<script src='/assets/js/bMap/map.js'></script>"); })();
整体的离线地图结构就结束了。
引入方式：
index.html <!--这一句话要放在body的上面--> <script type="text/javascript" src="<%= BASE_URL %>assets/js/bMap/map_loader.js"></script>
使用方式：
<template> <div id="bdMap" style="width: 100%; height: 500px;"></div> </template> <script> export default { mounted () { this.$nextTick(() => { this.drawMap() }) }, methods: { drawMap () { let map = new window.BMap.Map('bdMap', {}) map.setCurrentCity('北京') map.centerAndZoom(new window.BMap.Point(116.404, 39.915), 10) map.enableScrollWheelZoom() // 如下两项推荐设置，否则没有对应级别的瓦片会出现空白 map.setMinZoom(8) map.setMaxZoom(15) } } } </script>
说明
- 若需使用百度地图其他插件，可按上述方式处理。
vue中不可直接使用BMap而需要使用window.BMap。- 如果重启遇到如下报错，栈溢出。
解决方法如下：
//package.json //添加fix-memory-limit内容 { ... "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit" }, ... }
添加之后，安装两个npm包：increase-memory-limit和cross-env
//package.json //安装两个包 { ... "devDependencies": { "increase-memory-limit": "^1.0.3", "cross-env": "^5.0.5" } ... }
安装完成后，执行命令：npm run fix-memory-limit，然后启动就可以了。
