基於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="width: 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 ↩︎