基於vue實現百度離線地圖

基於vue實現百度離線地圖

---

1. 百度地圖API文件獲取

有網絡 的狀況下，需引入百度地圖API文件。以下：

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

無網絡 的狀況下，須要獲取該API文件的離線版本

• 打開 百度地圖示例DEMO¹ 界面，並打開調試模式(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↩