论vue引入百度离线地图

百度离线地图步骤

链接

先附上链接，下面会用到： 百度地图传送门

项目结构

第一步

打开百度地图传送门，找到图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​​，找到下面的内容，修改为如图。

​​​​​后面的路径根据具体情况修改，该项目的离线地图项目结构见上方，​​​​​的最终目的是引入​​images​​。

补充一句，图上没有，下面的z.cj = ​​z.url.proto + z.url.domain.main_domain_cdn.webmap[0] + "/";​​​这一句下面，再加一句​​z.cj = '';​​, 查到资料，得加这么一句话

• 搜索​​&mod​​，找到下面的内容，并修改

• 搜索​​qt=vtile​​，找到下面的内容，并修改

第三步

查看地图引入的所有模块

在​​map.js​​中找到下面内容，即为百度地图的所有模块，可以根据需要下载。

下载模块对应的JS文件

1. 打开上面百度地图地址
2. 左侧菜单随便选，从控制台找到下面这个接口

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 文件夹里就好了。

4. 获取地图瓦片 使用​​全能电子地图下载器​​​下载所需地图，软件下载地址：全能电子地图下载器传送门
5. 下载之后是类似于下图的文件结构，一个文件夹对应一个缩放级别的地图。

第四步

新建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​​，然后启动就可以了。