基于vue实现百度离线地图

基于vue实现百度离线地图

---

1. 百度地图API文件获取

有网络 的情况下，需引入百度地图API文件。如下：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

无网络 的情况下，需要获取该API文件的离线版本

• 打开 百度地图示例DEMO^[1] 界面，并打开调试模式(F12)，选择 Network
  

• 点击代码区域右上角的运行，选择 api?v=2.0&ak=.. 的网络请求
  

• 找到 src="http://api.map.baidu.com/getscript?v=2.0&ak=E4805d16520de693a3fe707cdc962045&services=&t=20181029172410" 的代码并打开，即可得到 百度地图的API文件 ，复制并保存到本地文件中。命名为 map.js
  

修改保存到本地的js文件

• 屏蔽ak验证，搜索 oa(a ,在方法开始处添加红框中内容
  

• 修改资源引用路径，搜索 main_domain_nocde，将 z.ma(不同版本名称可能不同) 修改为本地的离线资源路径
  

• 修改模块加载路径，搜索 &mod 按如下方式修改(红框中的内容保持一致，不同版本可能不同)
  

• 修改地图瓦片获取路径，搜索 qt=vtile 按如下方式修改(相同颜色的框中内容保持一致，后缀跟瓦片后缀保持一致)
  

获取模块

• 查看所有模块(该版本共44个模块) 在 map.js 中找到如下内容。即为百度地图所有的模块，可以根据需要下载
  

• 查看下载地址，在 百度地图示例->覆盖物示例 可在 Network 中找到 getmodules的请求
  

• 可看出，mod参数后面即为查询的模块，多模块间用逗号(,)分隔。模块名为 key_value 然后打开请求即可获取模块JS。模块命名为(key_value.js)。

• 放在上述配置的目录下即可

获取地图瓦片

• 使用 全能电子地图下载器 下载所需省份地图，并放在上述配置的目录下

创建map_loader.js

(function() {
  window.BMap_loadScriptTime = (new Date).getTime();
  window.BMap = window.BMap || {};
  window.BMap.apiLoad = function () {
    delete window.BMap.apiLoad;
  };
  let s = document.createElement('script');
  s.src = '/static/map/map.js';
  document.body.appendChild(s);
})
();

vue中使用

<template>
  <div id="bdMap" style=" 100%; height: 500px;"></div>
</template>
<script>
  import '/static/map/map_loader.js'
  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>

绘制边界

百度API提供了获取边界点的方法，但是离线无法使用，因此只能先把数据下载下来再使用

• 找到百度示例中的 添加行政区划 ，然后再示例代码中添加一行 console.log(rs.boundaries[i]) ，然后点击运行
  

• 复制 Console 里打印出来的内容到本地json文件中

边界数据json文件格式

{
  "boundaries": ["...", "..."]
}

vue中使用边界划分

this.axios.get('http://localhost:8080/hd.json').then((res) => {
  let count = res.boundaries.length
  let pointArray = []
  for (var i = 0; i < count; i++) {
    let ply = new window.BMap.Polygon(res.boundaries[i], {
      strokeWeight: 2,
      strokeOpacity: 1,
      strokeStyle: 'solid',
      strokeColor: '#ff0000',
      fillColor: '#00ffff',
      fillOpacity: 0.001
    })
    map.addOverlay(ply)
    pointArray = pointArray.concat(ply.getPath())
  }
  map.setViewport(pointArray)
})

其他

• 若需百度地图其他离线插件均可按上述方式进行处理

• vue中不可直接使用 BMap 而需要使用 window.BMap (之前使用BMap一直报错BMap is not defined)

• 离线地图目录结构
  

参考

1. 百度离线地图JS API V3.0

---

1. http://lbsyun.baidu.com/jsdemo.htm#a1_2 ↩︎