vue結合百度地圖（vue-baidu-map）繪制多邊形

一、安裝百度地圖

npm install vue-baidu-map --save
// 或者
yarn install vue-baidu-map

二、在main.js中引用

import BMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地圖開發者平台申請的密鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

三、看一下具體代碼吧

<template>
  <div class="mapbox">
    <baidu-map
      :center="center"
      :zoom="zoom"
      :map-click="false"
      @mousemove="syncPolygon"
      @ready="handler"
      style="height:800px"
      @click="paintPolygon"
      @rightclick="newPolygon"
    >
      <bm-polygon
        :path="path"
        v-for="path of polygonPath.paths"
        :key="path.toString()"
        stroke-color="blue"
        fill-color="red"
        :fill-opacity="0.8"
        :stroke-opacity="0.5"
        :stroke-weight="2"
        @click="alertpath"
      />
      <bm-control>
        <button @click="toggle('polygonPath')">{{ polygonPath.editing ? '停止繪制' : '開始繪制' }}</button>
      </bm-control>
    </baidu-map>
  </div>
</template>

<script>
export default {
  name: 'Polygon',
  data () {
    return {
      haha: '百度地圖',
      center: { lng: 116.412732, lat: 39.911707 },
      zoom: 13,
      polygonPath: {
        editing: false,
        paths: [] // 繪制完成后的經緯度，其實是在畫的時候動態push的，因為在點擊的時候觸發了 paintPolygon 函數
      }
    }
  },
  mounted: function () {
  },
  methods: {
    handler ({ BMap, map }) {
      console.log(BMap, map)
      map.enableScrollWheelZoom(true)
      // map.centerAndZoom('青島市', 13)
    },
    getClickInfo (e) {
      console.log(e.point.lng)
      console.log(e.point.lat)
    },
    // 開啟多邊形繪制
    toggle (name) {
      this[name].editing = !this[name].editing
      // 在這里做一步判斷，如果有路徑且開啟繪制就把原來的路徑清空
      if (this.polygonPath.paths && this.polygonPath.editing) {
        this.polygonPath.paths = []
      }
    },
    // 鼠標移動時
    syncPolygon (e) {
      if (!this.polygonPath.editing) {
        return
      }
      const { paths } = this.polygonPath
      if (!paths.length) {
        return
      }
      const path = paths[paths.length - 1]
      if (!path.length) {
        return
      }
      if (path.length === 1) {
        path.push(e.point)
      }
      this.$set(path, path.length - 1, e.point)
    },
    // 鼠標左鍵點擊時往路徑里push一個點
    newPolygon (e) {
      if (!this.polygonPath.editing) {
        return
      }
      // 當開始繪制后把按鈕調回開始繪制狀態，防止繪制多個圖形
      this['polygonPath'].editing = !this['polygonPath'].editing
      const { paths } = this.polygonPath
      if (!paths.length) {
        paths.push([])
      }
      const path = paths[paths.length - 1]
      path.pop()
      if (path.length) {
        paths.push([])
      }
    },
    // 鼠標右鍵多邊形繪制完成
    paintPolygon (e) {
      if (!this.polygonPath.editing) {
        return
      }
      const { paths } = this.polygonPath
      !paths.length && paths.push([])
      paths[paths.length - 1].push(e.point)
    },
    alertpath (e) {
      console.log(e.currentTarget.so)
      console.log(this.polygonPath.paths[0])
    }
  }
}