1. 程式人生 > >百度地圖使用之-----vue專案中百度地圖的應用以及遇到的一些問題

百度地圖使用之-----vue專案中百度地圖的應用以及遇到的一些問題

我們在專案開發時對於地圖應用也是比較常見的,因為百度地圖的開發文件都是基於HTML檔案的,並沒有介紹在Vue專案中的應用,而且網上關於在vue中的應用也比較少,官網的文件還是很容易看的懂,但是應用到vue中還是會遇到很多問題的,下面我就分享一些我在vue專案使用百度地圖的體會及問題。

一、vue專案中正確載入百度地圖

使用地圖第一步當然是得把百度地圖加載出來,然後才能進行後續的對地圖功能升級的操作。

1.首先我們需要去百度地圖開發者平臺申請一個祕鑰(這個就不多介紹了,在百度平臺上都能很容易申請到):在vue的index.html檔案中引入:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的祕鑰"></script>

2.然後你需要給地圖一個容器,而且必須要有寬高

<div id="mapbox">
   <div id="allmap" class="allmap"></div>
</div>

3.在webpack.config.base.js 檔案中:

entry: {
    app: './src/main.js'
  }, // 與entry同級位置
  externals: {
    "BMap": "BMap",
    "BMapLib": "BMapLib",
    "BMAP_ANCHOR_TOP_RIGHT": "BMAP_ANCHOR_TOP_RIGHT",
    "BMAP_DRAWING_POLYLINE": "BMAP_DRAWING_POLYLINE"
   },

4. 在vue檔案中引入所需要用到的檔案,有很多小夥伴就會疑問了,官網html檔案中的都不用第3和第4步,直接在script標籤中引入檔案就可以了,對,這也許是和在vue專案中應用最大的不同了吧,如果不這樣做,那你下面用到的BMap,滑鼠繪製的用到的BMapLib,BMAP_ANCHOR_TOP_RIGHT,BMAP_DRAWING_POLYLINE就全部會報undefined,但是我也是弄了很久,才嘗試這樣做

import BMap from 'BMap' // 百度地圖
import BMapLib from 'BMapLib' // 引入滑鼠繪製
import BMAP_DRAWING_POLYLINE from 'BMAP_DRAWING_POLYLINE' // 折線
import BMAP_ANCHOR_TOP_RIGHT from 'BMAP_ANCHOR_TOP_RIGHT' // 滑鼠繪製工具欄位置
import lampicon from './asset/location.png'
import flag from './asset/flag.png'

5.進行地圖的例項化,在methods中定義例項化地圖和生成自定義圖示方法:

// 建立地圖
    loadmap() {
      /** 建立地圖物件,初始化地圖中心點 */
      // 百度地圖API功能
      this.map = new BMap.Map('allmap', { enableMapClick: false }) // 建立Map例項,關閉地圖可點項
      this.map.centerAndZoom(new BMap.Point(this.lg, this.la), 15) // 初始化地圖,設定中心點座標和地圖級別
      // 根據搜尋返回的經緯度展示或者初始化顯示地圖中心點位置
      this.map.enableScrollWheelZoom(true) // 開啟滑鼠滾輪縮放
      var top_left_navigation = new BMap.NavigationControl() // 新增地圖控制元件
      this.map.addControl(top_left_navigation)
      /** 添加回到中心點定位控制元件 */
      var geolocationControl = new BMap.GeolocationControl()
      var _that = this
      geolocationControl.addEventListener('locationSuccess', function(e) {
        var point = new BMap.Point(_that.lg, _that.la)
        _that.map.centerAndZoom(point, 15)
      })
      geolocationControl.addEventListener('locationError', function(e) {
        // 定位失敗事件
        alert(e.message)
      })
      // 新增控制元件到地圖
      this.map.addControl(geolocationControl)
      // 生成地圖標註
      var Lpoint = new BMap.Point(this.lg, this.la)
      this.addMarker(Lpoint, flag) // 封裝的地圖標註函式,傳入中心點,標註圖示
    },
// 生成自定義圖示,位置:point, 圖示:icon
    addMarker(point, icon) {
      // 設定燈具圖示點尺寸
      const LdeviceSize = new BMap.Size(40, 40)
      // 生成燈具icon圖示
      const LdeviceIcon = new BMap.Icon(icon, LdeviceSize, { // 會以base64的方式傳參iconCar
        imageSize: LdeviceSize
      })
      // 建立燈具標註
      const Lmarker = new BMap.Marker(point, {
        icon: LdeviceIcon
      })
      // 將生成的燈具標註新增到地圖上
      this.map.addOverlay(Lmarker)
      if (this.oneMark) {
        Lmarker.enableDragging()
      }
      // 建立右鍵選單
      var markerMenu = new BMap.ContextMenu()
      markerMenu.addItem(new BMap.MenuItem('刪除', this.removeMarker.bind(Lmarker)))
      markerMenu.addItem(new BMap.MenuItem('儲存', this.saveMarker.bind(Lmarker)))
      Lmarker.addContextMenu(markerMenu)
    },

6.在mounted生命週期函式中執行this.loadmap()載入地圖(注意,一定要在此處載入地圖,dom結構才能獲取到,要不然地圖載入不出來)

(注意:地圖上的折線,多邊形這些滑鼠繪製是建立不了滑鼠右鍵選單的,只有標註點才能建立滑鼠右鍵選單)

二、滑鼠繪製折線,有時候我們需要在地圖上批量標註,可以用畫折線,然後在折線上生成標註點,或者單純的畫折線展示區域

/** 滑鼠繪製操作 */
    // 滑鼠繪製完成回撥,獲取每個點的經緯度
    overlaycomplete(e) {
      this.overlays.push(e.overlay)
      var path = e.overlay.getPath() // Array<Point> 返回折線陣列
      for (var i = 0; i < path.length; i++) {
        console.log('lng:' + path[i].lng + '\n lat:' + path[i].lat)
      }
    },
    initDrawing() {
      // 例項化滑鼠繪製工具
      this.drawingManager = new BMapLib.DrawingManager(this.map, {
        isOpen: false, // 是否開啟繪製模式
        enableDrawingTool: true, // 是否顯示工具欄
        // drawingMode:BMAP_DRAWING_POLYLINE, // 繪製模式  多邊形
        drawingToolOptions: {
          anchor: BMAP_ANCHOR_TOP_RIGHT, // 位置
          offset: new BMap.Size(5, 5), // 偏離值
          drawingModes: [
            BMAP_DRAWING_POLYLINE
          ]
        }
      })
      this.drawingManager.addEventListener('overlaycomplete', this.overlaycomplete)
      this.clickSetMark()
    },
    // 點選地圖生成標註圖示並獲取經緯度
    clickSetMark() {
      var _that_ = this
      _that_.map.addEventListener('click', function(e) {
        console.log('經緯度:', e.point.lng, e.point.lat)
        var p = new BMap.Point(e.point.lng, e.point.lat)
        // _that_.addMarker(p, lampicon)
        // 設定燈具圖示點尺寸
        const LdeviceSize = new BMap.Size(40, 40)
        // 生成燈具icon圖示
        const LdeviceIcon = new BMap.Icon(lampicon, LdeviceSize, { // 會以base64的方式傳參iconCar
          imageSize: LdeviceSize
        })
        // 建立燈具標註
        const Lmarker = new BMap.Marker(p, {
          icon: LdeviceIcon
        })
        // 將生成的燈具標註新增到地圖上
        _that_.map.addOverlay(Lmarker)
        // 建立右鍵選單
        var markerMenu = new BMap.ContextMenu()
        markerMenu.addItem(new BMap.MenuItem('刪除折線', _that_.removedrawing.bind(Lmarker)))
        markerMenu.addItem(new BMap.MenuItem('儲存', _that_.savedrawing.bind(Lmarker)))
        Lmarker.addContextMenu(markerMenu)
      })
    },
    // 保存摺線
    savedrawing() {
      console.log('保存摺線')
    },
    // 移除繪製折線
    removedrawing() {
      for (var i = 0; i < this.overlays.length; i++) {
        this.map.removeOverlay(this.overlays[i])
      }
      this.overlays.length = 0
      this.map.clearOverlays()
      var p = new BMap.Point(this.lg, this.la)
      this.addMarker(p, flag)
    },

在工具欄中需要畫點,畫圓,畫多邊形可以在例項化滑鼠繪製的地方新增繪製模式,然後我們就可以對摺線或者所標註的點進行滑鼠右鍵操作了。

最終展示的成果如下:

如有錯誤之處歡迎大家指正出來,謝謝