百度地图取点，以及不规则区域取点，行政区域搜索取点，自动计算中心

#写在前面

因为开发需要，弄了一个小的获取百度地图经纬度的取点小工具。方便自己取点，不规则区域取点，行政区域搜索取点。自动获取经纬度。(咳咳，最近感觉GitHub有点慢？？？？所以转移到了gitee)
项目地址（gitee）：https://gitee.com/lovezengcheng/baidumap-getpoint | 【点击跟踪项目地址】

1，引入vue-baidu-map，element，scss，这个就不说了把。

2，页面代码

<template>
  <div class="map-all">
    <baidu-map
      class="bm-view"
      :center="center"
      :zoom="zoom"
      :dragging="!isEdit"
      :double-click-zoom="!isEdit"
      @ready="handler"
      :min-zoom="5"
      :max-zoom="18"
      :mapClick="false"
      @click="mapClick"
    >
      <!-- 缩放 -->
      <bm-navigation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :offset="{ width: 10, height: 40 }"
      ></bm-navigation>
      <bm-city-list
        anchor="BMAP_ANCHOR_TOP_RIGHT"
        :offset="{ width: 20, height: 20 }"
      ></bm-city-list>
      <bm-polygon
        :path="polygonPath"
        stroke-color="blue"
        :stroke-opacity="0.5"
        :stroke-weight="2"
        :editing="isEdit"
        @lineupdate="updatePolygonPath"
      />
    </baidu-map>
    <div class="dot-list">
      <div class="dot-list-btn">
        <el-button type="primary" size="medium" @click="clearBtn"
          ><i class="el-icon-document-copy" />&nbsp;清空</el-button
        >
        <el-button
          size="medium"
          :type="isEdit ? 'success' : 'primary'"
          @click="startEdit"
          ><i :class="isEdit ? 'el-icon-close' : 'el-icon-check'" />&nbsp;{{
            isEdit ? "关闭绘制" : "开始绘制"
          }}</el-button
        >
      </div>
      <h3 v-if="mapPinot">当前点击点的经纬度</h3>
      <div class="dot-list-top" v-if="mapPinot">{{ mapPinot }}</div>
      <h3>框选区域的点的集合</h3>
      <div class="search-city">
        <el-input
          placeholder="请输入行政区域搜索"
          size="medium"
          v-model="searchInput"
          class="input-with-select"
        >
          <el-button
            type="primary"
            slot="append"
            icon="el-icon-search"
            @click="searchCity(searchInput)"
          ></el-button>
        </el-input>
      </div>
      <div class="dot-list-text">
        <p>[</p>
        <span v-for="(item, index) in polygonPath" :key="index"
          >{{ item }}<em v-if="index !== polygonPath.length - 1">,</em></span
        >
        <p>]</p>
      </div>
      <div class="dot-list-center" v-if="polygonPath.length > 1">
        <el-button
          type="danger"
          size="medium"
          @click="getPolygonCenter(polygonPath)"
          >获取中心点</el-button
        >
        <div class="dot-list-txt" v-if="polygonCenter">{{ polygonCenter }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "baidumap",
  data() {
    return {
      center: "深圳",
      zoom: 19,
      map: null,
      BMap: null,
      textarea: "",
      isEdit: false,
      polygonPath: [],
      mapPinot: null,
      polygonCenter: null,
      searchInput: "",
    };
  },
  methods: {
    handler({ BMap, map }) {
      this.map = map;
      this.BMap = BMap;
      map.enableScrollWheelZoom(true);
      map.setDefaultCursor("pointer");
    },
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath();
    },
    // 是否开启取点画框
    startEdit() {
      this.isEdit = !this.isEdit;
    },
    // 点击地图 取点
    mapClick(type) {
      if (this.isEdit) {
        this.polygonPath.push(type.point);
      }
      this.mapPinot = type.point;
    },
    // 清除
    clearBtn() {
      this.polygonPath = [];
      this.mapPinot = null;
      this.polygonCenter = null;
      this.searchInput = "";
    },
    // 获取中心点
    getPolygonCenter(polygonPath) {
      if (polygonPath.length > 1) {
        let lngTotal = 0;
        let latTotal = 0;
        let len = polygonPath.length;
        polygonPath.forEach((element) => {
          lngTotal += element.lng;
          latTotal += element.lat;
        });
        const lngCenter = (lngTotal / len).toFixed(8);
        const latCenter = (latTotal / len).toFixed(8);
        this.polygonCenter = { lng: lngCenter, lat: latCenter };
      } else {
        this.$message.error("请先选择区域，获取范围点!");
      }
    },
    // 搜索
    searchCity(input) {
      this.polygonPath = [];
      let bdary = new BMap.Boundary();
      bdary.get(input, (rs) => {
        rs.boundaries.forEach((item) => {
          let arrTemp = item.split(";");
          arrTemp.forEach((element) => {
            let arrPint = element.split(",");
            this.polygonPath.push({
              lng: Number(arrPint[0]),
              lat: Number(arrPint[1]),
            });
          });
        });
      });
      // 获取所有点的最佳视图
      setTimeout(() => {
        this.getPolygonCenter(this.polygonPath);
        this.map.setViewport(this.polygonPath);
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.map-all ::v-deep .city_content_top {
  padding: 15px 10px 25px 10px;
  .sel_city_input {
    height: 24px !important;
    line-height: 24px !important;
  }
}
.map-all {
  position: relative;
  .bm-view {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    cursor: pointer;
  }
  .dot-list {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    z-index: 100;
    width: 300px;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    h3 {
      padding: 5px;
      color: rgba(255, 255, 255, 0.8);
      font-size: 14px;
    }
    .dot-list-text {
      background: #fff;
      min-height: 300px;
      padding: 10px;
      max-height: calc(100vh - 360px);
      overflow: auto;
      font-size: 14px;
      color: #555;
      border-radius: 4px;
      line-height: 1.4em;
      span {
        display: block;
      }
      p {
        padding: 5px;
      }
    }
    .dot-list-top {
      background: #fff;
      padding: 10px;
      font-size: 14px;
      color: #555;
      border-radius: 4px;
    }
  }

  .dot-list-btn {
    padding: 10px;
    text-align: center;
    display: flex;
    button {
      width: 100%;
    }
  }
  .dot-list-center {
    padding-top: 10px;
    button {
      width: 100%;
    }
  }
  .dot-list-txt {
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    color: #555;
    line-height: 1.4em;
  }
  .search-city {
    margin-bottom: 10px;
  }
}
</style>