vue 派送区域 地图 可自选

<template>
  <div class="delivery-index">
   
    <el-dialog :title="(!rowData.storeName ? '' : rowData.storeName) + '配送设置'" :visible.sync="showEditRange" center width="50%">
      <div>配送区域设置：<span style="color: #FF3333;">如果不设置配送费用，则自动取系统默认配送费设置，仅针对商家自送生效</span></div>
      <div class="map-box">
        <div class="help-cover" v-if="showCover">
          <div class="img-word" v-if="AMapOpt.areaType === 'RADIUS'">
            <div class="circle"></div>
            <p class="">拖拽图形边上的小圆点，编辑配送范围</p>
            <div class="close-btn" @click="showCover = false">我知道了</div>
          </div>
          <div class="img-word" v-if="AMapOpt.areaType === 'CUSTOM'">
            <div class="polygon"></div>
            <p class="">拖拽图形边上的小圆点，编辑配送范围</p>
            <div class="close-btn" @click="showCover = false">我知道了</div>
          </div>
        </div>
        <div class="handle-box">
          <label>划分方式：</label>
          <el-radio-group v-model="AMapOpt.areaType" @change="changeAreaType" style="margin-right: 20px;">
            <el-radio :label="'RADIUS'">半径</el-radio>
            <!-- <el-radio :label="'CUSTOM'">自定义</el-radio> -->
          </el-radio-group>
          <label>配送区域：</label>
          <div class="delivery-area">
            <div v-if="AMapOpt.areaType == 'RADIUS'">
              <el-input type="number" v-model="circleRadius" @keyup="changeRadius" @blur="changeRadius"></el-input>公里内
            </div>
            <div v-if="AMapOpt.areaType == 'CUSTOM'" class="custom-area">区域内</div>
          </div>
        </div>
        <div class="help-btn" @click="showCover = true">使用帮助</div>
        <el-amap 
          class="amap-box" 
          :plugin="AMapOpt.plugin" 
          :center="AMapOpt.center" 
          :amap-manager="AMapOpt.amapManager" 
          :zoom="AMapOpt.zoom" 
          :events="AMapOpt.events" 
          :vid="'amap-vue'">
          <el-amap-marker 
            vid="component-marker" 
            :position="AMapOpt.markers.position">
          </el-amap-marker>
          <el-amap-circle 
            v-if="AMapOpt.areaType === 'RADIUS'"
            :editable="true"
            :center="AMapOpt.circles.center" 
            :radius="AMapOpt.circles.radius" 
            :fill-opacity="AMapOpt.circles.fillOpacity" 
            :fillColor="AMapOpt.circles.fillColor" 
            :strokeColor="AMapOpt.circles.strokeColor" 
            :events="AMapOpt.circles.events">
          </el-amap-circle>
          <div v-if="AMapOpt.areaType === 'CUSTOM'">
            <el-amap-polygon
              v-for="(polygon, index) in AMapOpt.polygons"
              :key="index"
              :vid="index" 
              :ref="`polygon_${
   index}`"
              :editable="polygon.editable" 
              :path="polygon.path" 
              :draggable="polygon.draggable"
              :fillOpacity="polygon.fillOpacity"
              :fillColor="polygon.fillColor" 
              :strokeColor="polygon.strokeColor" 
              :events="polygon.events">
            </el-amap-polygon>
          </div>
        </el-amap>
      </div>
      <div class="submit-box">
        <el-button @click="cancelSetArea">取消</el-button>
        <el-button type="primary" @click="submitArea">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
    AMapManager } from 'vue-amap';

export default {
   
  components: {
   
    
  },
  data() {
   
    return {
   
      // 门店名称
      storeName: '',
      // 配送方式
      deliveryType: '',
      DELIVERY_TYPE: [
        {
    value: "", label: "不限" },
        {
    value: "EXPRESS", label: "外送" },
        {
    value: "LOGISTICAL", label: "快递" },
        {
    value: "SELF", label: "预约自提" },
        {
    value: "TAKEMEALNOW", label: "立即取餐" }
      ],
      tableLoading: true,
      pageData: {
   
        page: 1,
        pageSize: 10,
        pageCount: 1,
        recordCount: 5,
        records: []
      },
      changedPrice: '',
      rowData: {
   },
      showEditRange: true, // 配送设置弹窗
      circleRadius: 2.000, // 半径，当AMapOpt.areaType === 'RADIUS'时
      polygonPath: [], // 多边形路径，当AMapOpt.areaType === 'CUSTOM'时
      showCover: false, // 是否显示使用帮助
      AMapOpt: {
   
        areaType: 'RADIUS',
        zoom: 13,
        center: [121.51399, 31.085995],
        AMapManager,
        plugin: [{
   
          pName: 'ToolBar',
          events: {
   
            init(instance) {
   
              // 初始化
              // console.log(instance);
            }
          }
        }],
        markers: {
   
          position: [121.51399, 31.085995]
        },
        circles: {
   
          id: 0,
          center: [121.51399, 31.085995],
          radius: 2000,
          fillOpacity: 0.4,
          fillColor: '#ABCBF7',
          strokeColor: '#3388FF',
          events: {
   
            click: () => {
   
              console.log('click');
            },
            adjust: (type, target, radius) => {
   
              this.circleRadius = type.radius / 1000;
            },
            move: (type, target, lnglat) => {
   
              console.log(type)
            }
          }
        },
        polygons: [
          {
   
            editable: true,
            draggable: false,
            fillOpacity: 0.4,
            fillColor: '#ABCBF7',
            strokeColor: '#3388FF',
            path: [],
            events: {
   
              adjust: (e) => {
   
                console.log(e)
                this.polygonPath = this.$refs.polygon_0[0].$$getPath();
                console.log(this.polygonPath)
              },
              click: () => {
   
                this.AMapOpt.polygons[0].editable = !this.AMapOpt.polygons[0].editable;
              },
              end: (type, target) => {
   
                console.log(type);
                console.log(target)