Vue页面使用百度地图绘多边形和圆并取值

前提：只能使用Vue2，Vue3不支持

安装依赖：

npm install vue-baidu-map --save

然后main.js引入：

import BaiduMap from "vue-baidu-map"
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: "申请的ak",
})

然后就可以直接使用了

<template>
  <baidu-map
    style="height: 600px"
    class="map"
    :center="{ lng: 116.404, lat: 39.915 }"
    :zoom="15"
    :map-click="false"
    :double-click-zoom="false"
    @mousemove="syncPolyline"
    @click="paintPolyline"
    @rightclick="newPolyline"
    :scroll-wheel-zoom="true"
  >
    <bm-control>
      <div class="btns">
        <el-radio-group v-model="eventType" @change="onRadioChange">
          <el-radio
            class="btn"
            label="polygonObj"
            :disabled="circleObj.paths && circleObj.paths.length > 0"
            >绘制多边形
          </el-radio>
          <el-radio
            class="btn"
            :disabled="polygonObj.paths && polygonObj.paths.length > 0"
            label="circleObj"
            >绘制圆形</el-radio
          >
          <el-radio
            class="btn"
            label="Edit"
            :disabled="
              polygonObj.paths.length <= 0 && circleObj.paths.length <= 0
            "
            >编辑
          </el-radio>
          <el-radio
            class="btn"
            :disabled="
              polygonObj.paths.length <= 0 && circleObj.paths.length <= 0
            "
            label="noEdit"
            >取消编辑</el-radio
          >
        </el-radio-group>
        <div class="reset">
          <el-button size="mini" type="primary" @click="resetRecover"
            >重置</el-button
          >
          <div style="padding: 5px 0"></div>
          <el-button size="mini" type="primary" @click="getVal"
            >获取数值</el-button
          >
        </div>
      </div>
    </bm-control>
    <bm-geolocation
      anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
      :showAddressBar="true"
      :autoLocation="true"
      @locationSuccess="getLocation"
    ></bm-geolocation>
    <template v-if="polygonObj.isShow">
      <bm-polygon
        :path="path"
        v-for="(path, index) of polygonObj.paths"
        :key="'polygon_' + index"
        stroke-color="blue"
        fillColor="pink"
        :stroke-opacity="0.5"
        :stroke-weight="2"
        :editing="isEditing"
      />
    </template>
    <template v-if="circleObj.isShow">
      <bm-circle
        :center="path[0]"
        v-for="(path, index) of circleObj.paths"
        :key="'circle_' + index"
        :radius="circleObj.radius"
        stroke-color="blue"
        :stroke-opacity="0.5"
        fillColor="pink"
        :stroke-weight="2"
        @lineupdate="updateCirclePath"
        :editing="isEditCircle"
      ></bm-circle>
    </template>
  </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      Symbol: {
        path: "../assets/aa.svg",
        opts: {
          anchor: "12px",
          fillColor: "#000000",
        },
      },
      eventType: "",
      isEditCircle: true, //圆编辑
      isEditing: false,
      currEditName: "polygonObj",
      resetData: false,
      recoverData: false,
      polygonObj: {
        isShow: false,
        editing: false,
        paths: [],
      },
      circleObj: {
        isShow: false,
        editing: false,
        paths: [],
        radius: 500,
      },
    };
  },
  mounted() {
    this.circleObj.isShow = true;
    this.circleObj.paths = [[{ lat: 39.941724, lng: 116.37547 }]];
    this.circleObj.radius = 650.0972003178614;
    //this.polygonObj.isShow = true;
    // this.polygonObj.paths = [
    //   [
    //     { lat: 39.929, lng: 116.366127 },
    //     { lat: 39.928502, lng: 116.382728 },
    //     { lat: 39.91821, lng: 116.372955 },
    //   ],
    //   [
    //     { lat: 39.928281, lng: 116.400479 },
    //     { lat: 39.928447, lng: 116.411258 },
    //     { lat: 39.921751, lng: 116.400982 },
    //     { lat: 39.921253, lng: 116.413199 },
    //   ],
    // ];
  },
  methods: {
    getLocation(point, AddressComponent, marker) {
      console.log(point, AddressComponent, marker);
    },
    onRadioChange(e) {
      if (e === "polygonObj") {
        // this.setDefaultCursor('crosshair')
        this.toggle(e);
      } else if (e === "Edit") {
        // this.setDefaultCursor()
        this.toEdit();
      } else if (e === "noEdit") {
        // this.setDefaultCursor('crosshair')
        this.toNoEdit();
      } else if (e === "circleObj") {
        // this.setDefaultCursor('crosshair')
        this.toggle(e);
      }
    },
    toEdit() {
      console.log(this.isEditing);
      // this.$set(this, "currEditName.editing", true);
      if (this.polygonObj.paths) {
        this.isEditing = true;
      }
      if (this.circleObj.paths) {
        this.isEditCircle = true;
      }
    },
    toNoEdit() {
      if (this.polygonObj.paths) {
        this.isEditing = false;
      }
      if (this.circleObj.paths) {
        this.isEditCircle = false;
      }
    },
    // toNoEdit() {
    //   this.isEditing = false;
    // },
    toggle(name) {
      // let nameArr = ["polygonObj", "circleObj"];
      this.currEditName = name;
      this[name].editing = true;
      // if (this.name.editing == true) {
      //   this.name.editing == false;
      // }
      // nameArr.splice(nameArr.indexOf(name), 1);
      // nameArr.forEach((curr) => {
      //   console.log("cccccccccccccc", curr);
      //   this[curr].editing = false;
      // });
    },
    getVal() {
      console.log(this.circleObj.paths);
      console.log(this.polygonObj.paths);
      console.log(this.circleObj.radius);
    },
    syncPolyline(e) {
      // if (this.eventType == "") {
      //   return;
      // }
      if (!this[this.currEditName].editing) {
        return;
      }
      // if (this.circleObj.paths && this.circleObj.paths.length > 0) {
      //   return;
      // }
      const { paths } = this[this.currEditName];
      console.log("path", this.currEditName);
      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);
    },
    newPolyline() {
      // if (this.eventType == "") {
      //   return;
      // }
      if (!this[this.currEditName].editing) {
        return;
      }
      const { paths } = this[this.currEditName];
      if (!paths.length) {
        paths.push([]);
      }
      const path = paths[paths.length - 1];
      path.pop();
      if (path.length) {
        paths.push([]);
      }
    },
    paintPolyline(e) {
      if (this.eventType == "") {
        return;
      }
      // this.old = e.point.lng;
      // console.log(this.old);
      // console.log("------------------------", e.point);
      // console.log(e.point.lng);
      // if (!this[this.currEditName].editing) {
      //   return;
      // }
      // if (this.oldVal !== this.newVal) {
      //   paths[paths.length - 1].push(e.point);
      // }
      const { paths } = this[this.currEditName];
      !paths.length && paths.push([]);
      paths[paths.length - 1].push(e.point);
      this[this.currEditName].isShow = true;
      if (this.currEditName === "circleObj") {
        this[this.currEditName].editing = false;
      }
      // this.$store.dispatch("setLastDrawHistoryActions", {
      //   paths: this[this.currEditName].paths,
      //   lastEditName: this.currEditName,
      // });
    },
    updateCirclePath(e) {
      this.circleObj.paths[0] = e.target.getCenter();
      this.circleObj.radius = e.target.getRadius();
    },
    resetRecover(name) {
      console.log("bbbbbbbbbbbbbbbbbbbbb", name);
      if (this.circleObj.paths.length > 0) {
        this.circleObj.paths = [];
        this.circleObj.radius = 500;
      }
      if (this.polygonObj.paths.length > 0) {
        this.polygonObj.paths = [];
      }
    },
  },
};
</script>

<style lang="less" scoped>
.map {
  width: 100%;
  height: 800px;

  /deep/ .anchorBL {
    display: none;
  }

  .map-edit-container {
    // width: 250px;
    // height: 40px;
    //line-height: 30px;
    padding-left: 10px;
    background-color: #fff;
    -webkit-box-shadow: 1px 1px 1px #000;
    box-shadow: 2px 3px 1px #909399;
    border-radius: 5px;
    display: flex;
    .water-icon-device {
      padding: 12px 0;
    }

    .map-edit-item {
      padding: 0 7px;
      margin: 6px 0;

      &:nth-of-type(1),
      &:nth-of-type(2) {
        border-right: 1px solid rgba(110, 110, 110, 0.3);
      }

      div {
        font-size: 18px;
        cursor: pointer;
        margin-left: 5px;
        padding: 5px;

        &:hover {
          background-color: #ccc;
        }
      }

      .currEdit {
        background-color: #ccc;
      }
    }
  }
}
.btns {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 20;
  padding: 10px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);

  .btn {
    display: block;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5px;
  }

  .reset {
    margin-top: 10px;
    width: 100%;
    text-align: center;
  }
}
</style>

有什么问题可以评论区