Vue中用 Vue Baidu Map 绘制地图

1、先贴上官网案例

https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting

官网的东西，没有百度地图开放平台上面的东西齐全，考虑到vue 只不过是框架，全部搬过来也是不现实的，所以有需要的小伙伴可以去百度地图的官网去查看相关的教程。

2、需求

我的需求是可以回显之前绘制过的数据，而且只能显示一个图层，不允许有多个图层。
因此官网的教程与我的不符合，我又去找了一下其他的案例，发现有一个符合我的要求
先贴上链接
https://www.cnblogs.com/caoxen/p/11352488.html#commentform
我改动了一丢丢，贴上我的，因为他的没有标注如何回显数据，而且注释的稍微有些些问题，哈哈哈，我差点被绕晕。

<baidu-map
   :center="mapOptions.center"
   :zoom="mapOptions.zoom"
   :scroll-wheel-zoom="mapOptions.scroll"
   :map-click="false"
   @ready="mapReady"
   @mousemove="syncPolygon"
   @click="paintPolygon"
   @rightclick="finishPolygon"
   class="baidu-map-view"
   ak="mapOptions.mapAK"
 >
   <bm-polygon
      :path="path"
      v-for="path of polygonPath.paths"
      :key="path.toString()"
      :fill-opacity="0.4"
      :stroke-opacity="0.5"
      :stroke-weight="3"
      stroke-color="red"
      fill-color="blue"
    />
    <bm-control>
      <el-button type="button"  @click="toggle('polygonPath')">{{ polygonPath.editing ? '停止绘制' : '开始绘制' }}</el-button>
    </bm-control>
    <!--比例尺控件-->
    <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
    <!-- 定位控件 -->
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-geolocation>
    <!--缩放控件-->
    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
  </baidu-map>


<script>
import { BaiduMap, BmScale, BmGeolocation, BmNavigation, BmPolygon} from "vue-baidu-map";
export default {
polygonPath: {
        editing: false,
        paths: [] // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
      },
  },
methods: {
 //地图加载
  mapReady({ BMap, map }) {
    this.mapOptions.center.lng = 116.404;
    this.mapOptions.center.lat = 39.915;
    this.mapOptions.zoom = 15;
    window.map = map; //将map变量存储在全局
    //这里是个重点，需要将整个数组作为整体推到paths中才可以。 
    let mapPath = [
      {lng: 116.392358, lat: 39.91583},
      {lng: 116.382225, lat: 39.909798},
      {lng: 116.397748, lat: 39.910462},
    ]
    this.polygonPath.paths.push(mapPath)
  },
   // 开启多边形绘制
    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)
    },
    // 鼠标右键多边形绘制完成
    finishPolygon (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([])
      }
    },
    // 鼠标左键点击时往路径里push一个点
    paintPolygon (e) {
      if (!this.polygonPath.editing) {
        return
      }
      const { paths } = this.polygonPath
      !paths.length && paths.push([])
      paths[paths.length - 1].push(e.point)
    },
},

然后我发现，其实跟官网的差不多，我感觉有点不太爽啊，感觉多此一举哇，
还是要自己改代码，偷懒是偷不掉的哇！

贴一下我自己的：

<baidu-map
   :center="mapOptions.center"
   :zoom="mapOptions.zoom"
   :scroll-wheel-zoom="mapOptions.scroll"
   :map-click="false"
   @ready="mapReady"
   @mousemove="syncPolygon"
   @click="paintPolygon"
   @rightclick="finishPolygon"
   class="baidu-map-view"
   ak="mapOptions.mapAK"
 >
   <bm-polygon
     :path="paths"
     :key="paths.toString()"
     :fill-opacity="0.4"
     :stroke-opacity="0.5"
     :stroke-weight="3"
     stroke-color="red"
     fill-color="blue"
   />
   <bm-control>
     <el-button type="button"  @click="toggle()">{{ editing ? '停止绘制' : '开始绘制' }}</el-button>
   </bm-control>
   <!--比例尺控件-->
   <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
   <!-- 定位控件 -->
   <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-geolocation>
   <!--缩放控件-->
   <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
 </baidu-map>

<script>
import { BaiduMap, BmScale, BmGeolocation, BmNavigation, BmPolygon} from "vue-baidu-map";
export default {
  name: "areaInfo",
  components: {
    BaiduMap,
    BmScale,
    BmGeolocation,
    BmNavigation,
    BmPolygon
  },
  data() {
    return {
      mapOptions: {
        mapAK: "A1LZGCUGO4zB4ZH0MEGDMihQRggNpURx",
        center: { lng: 0, lat: 0 },
        zoom: 3,
        scroll: "true"
      },
      editing: false,
        paths: [], // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
    };
  },
  methods: {

    //地图加载
    mapReady({ BMap, map }) {
      this.mapOptions.center.lng = 116.404;
      this.mapOptions.center.lat = 39.915;
      this.mapOptions.zoom = 15;
      window.map = map; //将map变量存储在全局
      //需要将整个数组作为整体推到paths中才可以。
      let mapPath = [
        {lng: 116.392358, lat: 39.91583},
        {lng: 116.382225, lat: 39.909798},
        {lng: 116.397748, lat: 39.910462},
      ]
      this.paths=mapPath
    },
    // 开启多边形绘制
    toggle () {
      this.editing = !this.editing
      // 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空
      if (this.paths && this.editing) {
        this.paths = []
      }
    },
    // 鼠标移动时
    syncPolygon (e) {
      if (!this.editing) {
        return
      }
      let paths = this.paths
      if (!paths.length) {
        return
      }
      if (paths.length === 1) {
        paths.push(e.point)
      }
      this.$set(paths, paths.length - 1, e.point)
      console.log(this.paths)
    },
    // 鼠标右键多边形绘制完成
    finishPolygon (e) {
      if (!this.editing) {
        return
      }
      // 当开始绘制后把按钮调回开始绘制状态，防止绘制多个图形
      this.editing = !this.editing
       let paths = this.paths
      if (!paths.length) {
        this.paths = []
      }
      paths.pop()
      console.log(paths)
    },
    // 鼠标左键点击时往路径里push一个点
    paintPolygon (e) {
      if (!this.editing) {
        return
      }
      let paths = this.paths
      paths.push(e.point)
    },
  }
};
</script>

只是对数据的格式稍微改动了一下，让数据更好的存储了一下。

菜鸟自我成长中，欢迎大佬指点。自己一个人摸索真的太难了。