一、在vue-cli的框架下的main.js(或者main.ts)中引入高德插件，代码如下：

import Vue from \'vue\'
import VueAMap from \'vue-amap\'
import ElementUI from \'element-ui\'

import App from \'./App.vue\'
import router from \'./router\'
import store from \'./store\'
import \'./registerServiceWorker\'

Vue.use(VueAMap)
Vue.use(ElementUI)

VueAMap.initAMapApiLoader({
  // 高德的key
  key: \'你的高德key\',
  // 插件集合
  plugin: [
    \'AMap.Autocomplete\',
    \'AMap.PlaceSearch\',
    \'AMap.Scale\',
    \'AMap.OverView\',
    \'AMap.ToolBar\',
    \'AMap.MapType\',
    \'AMap.PolyEditor\',
    \'AMap.CircleEditor\',
    \'AMap.Geocoder\',
    \'AMap.Geolocation\'
  ],
  // 高德 sdk 版本，默认为 1.4.4
  v: \'1.4.10\'
})

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount(\'#app\')

第三种画多边形的效果图：

　　　　注意：1、这种画多边形，开始就需要一个初始的多边形；

　　　　　　　2、所以，输入要画多边形范围的地名，点击搜索，地图会跳转到搜索的地方，同时得到经纬度；

　　　　　　　3、点“范围绘制”时，我再方法里根据第2步的经纬度，初始了一个多边形；

　　　　****隐藏彩蛋****

　　下图的 “请输入经纬度” 可以输入一大组的经纬度，按回车键，也可以画出多边形，在按“范围绘制”也可以更改；（格式如下：）

 

这个格式就是复制的地图上显示的经纬度坐标
106.2246 , 29.59258
106.225064 , 29.593287
106.226137 , 29.593558
106.22692 , 29.593083

 

 

二、第一种画化：使用Geolocation画多边形（效果是在地图点了，才会形成多边形）

// 新增 编辑 查看 
<template>
  <div class="point">
    <el-header></el-header>
    <div class="action-bar">
      <el-form class="inline-form" :rules="rules" ref="formData" size="small" :model="formData">
        <el-form-item label label-width="220" prop="location">
          <el-input
            :disabled="!ifFalg"
            class="name-input"
            clearable
            v-model="formData.location"
            placeholder="名称"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item label prop="longitude">
          <el-input
            :disabled="!ifFalg"
            class="my-input"
            clearable
            v-model.number="formData.longitude"
            placeholder="经度 "
          ></el-input>
        </el-form-item>
        <el-form-item label  prop="latitude">
          <el-input
            :disabled="!ifFalg"
            class="my-input"
            clearable
            v-model.number="formData.latitude"
            placeholder="纬度"
          ></el-input>
        </el-form-item>
        <el-button class="my-button" v-if="ifFalg" type="primary" @click="save" size="small">保存</el-button>
        <el-button class="my-button" size="small" @click="close">关闭</el-button>
      </el-form>
    </div>
    <div class="map-box">
      <div class="map-tool">
        <div v-if="ifFalg">
          <el-checkbox v-model="enterType">地图上描点</el-checkbox>
        </div>
        <!-- <el-checkbox @change="checkbox" v-model="enterType">地图上描点</el-checkbox> -->
        <div class="longlat">
          <ul>
            <li v-for="(item, index) in lnglatpoints" :key="index">
              {{item.longitude}} , {{item.latitude}}
              <i
                v-if="ifFalg"
                class="el-icon-close"
                @click="deletes(item)"
              ></i>
            </li>
          </ul>
          <el-input
            v-if="ifFalg"
            class="my-input"
            size="small"
            clearable
            v-model="lngLat"
            @keyup.enter.native="submitEnter"
            placeholder="请输入经纬度"
          ></el-input>
          <el-button v-if="ifFalg" size="small" @click="clear" type="primary" class="claer">清除</el-button>
        </div>
      </div>
      <div class="map" id="map">
        <el-amap
          ref="map"
          bubble
          :plugin="plugin"
          :zoom="map.zoom"
          :center="map.center"
          :events="events"
          id="amap"
        >
          <el-amap-polygon
            :events="plugin.events"
            :path="path"
            :draggable="draggable"
            fillColor="#2b83f9"
            fillOpacity="0.5"
            strokeWeight="0"
            strokeColor="#2b83f9"
            strokeOpacity="0.5"
          ></el-amap-polygon>
          <!-- <el-amap-marker  :position="marker.position" :events="plugin.events"></el-amap-marker> -->
          <el-amap-marker v-if="formData.type === 1" :position="map.center" :label="label"></el-amap-marker>
        </el-amap>
      </div>
     
    </div>
  </div>
</template>
<script lang="ts">
import * as api from \'@/utils/api/index\'
import { Component, Vue } from \'vue-property-decorator\'
import eHeader from \'@/components/header.vue\'
import { constants } from \'http2\'
import * as util from \'@/utils/util.ts\'

const testLongitude = (rule: any, value: string, callback: Function) => {
  if (util.regExp.longitudeRegExp.test(value)) {
    return callback()
  } else {
    return callback(new Error(\'请输入正确的经度\'))
  }
}
const testLatitude = (rule: any, value: string, callback: Function) => {
  if (util.regExp.latitudeRegExp.test(value)) {
    return callback()
  } else {
    return callback(new Error(\'请输入正确的纬度\'))
  }
}
@Component({
  components: {
    \'el-header\': eHeader
  }
})
export default class point extends Vue {
  private breadcrumbId = 0
  private id = \'\'
  private lngLat = \'\'
  private ifFalg = true
  private map = {
    zoom: 15,
    center: [106.55073, 29.56471]
  }
  private path: any = []
  private draggable = false
  private lnglatpoints: any = []
  private enterType = false // 录入坐标 | 地图上描点
  private cities = []
  private formData = {
    location: \'\',
    longitude: \'\',
    latitude: \'\'
  }
  plugin = {
    pName: \'Geolocation\',
    events: {}
  }
  events = {}
  private test = 1

  private rules = {
    location: [
      { required: true, message: \'请输入接送点名称\', trigger: \'blur\' }
    ],
    longitude: [{ validator: testLongitude, trigger: \'blur\' }],
    latitude: [{ validator: testLatitude, trigger: \'blur\' }]
  }

  mounted() {
    this.id = this.$route.params.id
    this.breadcrumbId = Number(this.$route.query.breadcrumbId)
    if (this.breadcrumbId === 2) {
      this.ifFalg = false
    }
    if (this.id !== \'-1\') {
      this.details()
    }

    // this.city()
    let _this: any = this

    // 地图点击事件
    _this.events = {
      click: (e: any) => {
        if (this.enterType) {
          this.path = []
          console.log(e.lnglat)
          let lnglat = e.lnglat
          this.lnglatpoints.push({
            latitude: lnglat.lat,
            longitude: lnglat.lng
          })
          console.log(this.lnglatpoints)
          this.lnglatpoints.map((val: any, index: number) => {
            console.log(index)
            if (index === 0) {
              this.map.center = [val.longitude, val.latitude]
            }
            let arr = [val.longitude, val.latitude]
            this.path.push(arr)
          })
          // this.setFitView()
        }
      }
    }

    // 多边形点击事件
    _this.plugin.events = {
      click: (e: any) => {
        if (this.enterType) {
          this.path = []
          console.log(e.lnglat)
          let lnglat = e.lnglat
          this.lnglatpoints.push({
            latitude: lnglat.lat,
            longitude: lnglat.lng
          })
          console.log(this.lnglatpoints)
          this.lnglatpoints.map((val: any, index: number) => {
            console.log(index)
            if (index === 0) {
              this.map.center = [val.longitude, val.latitude]
            }
            let arr = [val.longitude, val.latitude]
            this.path.push(arr)
          })
          // this.setFitView()
        }
      }
    }
  }// 获取接送范围集合
  details() {
    const loading = this.$loading({
      lock: true,
      text: \'加载中...\'
    })
    api.main.boss_line_point__get({ params: {param: this.id}}).then((res: any) => {
        if (res.data.success) {
          const response = res.data.data
          this.formData = response
          let points = res.data.data.points
          if (points != null) {
            for (let i = 0; i < points.length; i++) {
              points[i].id = i
            }
            this.lnglatpoints = points
            this.lnglatpoints.map((val: any, index: number) => {
              if (index === 0) {
                this.map.center = [val.longitude, val.latitude]
              }
              let arr = [val.longitude, val.latitude]
              this.path.push(arr)
            })
          } else {
            this.map.center = [
              Number(this.formData.longitude),
              Number(this.formData.latitude)
            ]
            this.label.content = this.formData.location
          }
          setTimeout(this.setFitView, 0)
        } else {
          this.$message.error(res.data.message)
        }
        loading.close()
      })
  }

  // 移除经纬度
  deletes(data: any) {
    let e: any = this
    this.path = []
    for (let i = 0; i < e.lnglatpoints.length; i++) {
      if (
        data.latitude === e.lnglatpoints[i].latitude &&
        data.longitude === e.lnglatpoints[i].longitude
      ) {
        e.lnglatpoints.splice(i, 1)
      }
    }
    console.log(e.path)
    this.lnglatpoints.map((val: any, index: number) => {
      let arr = [val.longitude, val.latitude]
      this.path.push(arr)
      if (index === 0) {
        this.map.center = [val.longitude, val.latitude]
      }
      console.log(this.path)
    })
  }

  clear() {
    this.$confirm(\'确认删除绘制的接送区域？\', \'删除\', {
      confirmButtonText: \'确定\',
      cancelButtonText: \'取消\',
      type: \'warning\'
    })
      .then(() => {
        let self: any = this
        this.path = []
        this.lnglatpoints = []
        // this.map.center = [106.5507300000, 29.5647100000]
        this.lngLat = \'\'
        self.formData.points = []
      })
      .catch(() => {})
  }

  // 输入经纬度
  submitEnter() {
    // eslint-disable-next-line
    const illegalRegExp = /^(\D|\d*\.?\d*,*\s)|[^\d\s,\.]|^\d*\.?\d*$|(,\.|\.,)+|(\d*\.*\d*,){2,}|(\d*\.){2,}|(\d*\s){2,}|(\s\d*\.?\d*|\D)$/g
    const replaceWhiteSpaceRegExp = /(?<=(,|\.|\s))\s+|\s+(?=(,|\.))|^\s|\s+$/g

    this.lngLat = this.lngLat.replace(replaceWhiteSpaceRegExp, \'\')
    if (illegalRegExp.test(this.lngLat)) {
      return this.$message.error(\'经纬度格式错误！\')
    }
    const lnglatArray = this.lngLat.split(\' \')
    lnglatArray.forEach(lnglatString => {
      const lnglatObject = {
        longitude: lnglatString.split(\',\')[0],
        latitude: lnglatString.split(\',\')[1]
      }
      this.lnglatpoints.push(lnglatObject)
    })
    this.path = []
    this.lnglatpoints.map((val: any, index: number) => {
      let arr = [val.longitude, val.latitude]
      this.path.push(arr)
      this.lngLat = \'\'
      if (index === 0) {
        this.map.center = [val.longitude, val.latitude]
      }
    })
  }

  setFitView() {
    const vm: any = this
    let map = vm.$refs.map.$$getInstance()
    map.setFitView()
  }

  close() {
    this.$router.push({
      name: \'pointList\'
    })
  }

  save() {
    let e: any = this
    let params: any = {}
    if (this.id !== \'-1\') {
      // 编辑
      e.formData.id = this.id
      params.id = this.id
    }
    e.formData.points = this.lnglatpoints
    if (e.formData.location === \'\' || e.formData.location === null) {
      this.$message.warning(\'名称不能为空！\')
      return
    }
    if (this.lnglatpoints.length < 3 && e.formData.type === 2) {
      this.$message.warning(\'经纬度不能小于三组！\')
      return
    }
    params.points = this.lnglatpoints
    params.location = this.formData.location
    params.longitude = this.formData.longitude
    params.latitude = this.formData.latitude
    if (this.id !== \'-1\') {
      api.main.boss_line_point_update_post({ data: params }).then((res: any) => {
          if (res.data.success) {
            this.$message.success(\'保存成功!\')
            this.$router.push({
              name: \'pointList\'
            })
          } else {
            this.$message.error(res.data.message)
          }
        })
    } else {
      api.main
        .boss_line_point_addAndBindLine_post({ data: params })
        .then((res: any) => {
          if (res.data.success) {
            this.$message.success(\'保存成功!\')
            this.$router.push({
              name: \'pointList\'
            })
          } else {
            this.$message.error(res.data.message)
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.inline-form {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  flex-wrap: wrap;
  .el-form-item {
    margin-bottom: 10px;
    margin-left: 15px;
    display: flex;
  }
  .el-button {
    margin-left: 15px;
    height: 32px;
  }
}
.action-bar {
  box-sizing: border-box;
  padding: 10px;
  padding-bottom: 0;

  border: {
    top: 1px solid #ddd;
    bottom: 1px solid #ddd;
  }
  .my-input {
    width: 150px;
  }
  .name-input {
    width: 260px;
  }
}
.el-select-dropdown__item {
  background-color: white;
  text-indent: 10px;
}
.claer {
  margin-top: 15px;
  float: right;
}

$map_height: calc(100vh - 55px - 50px - 75px - 15px);
.map-box {
  position: relative;

  height: $map_height;
  .map-tool {
    position: absolute;
    width: 220px;
    z-index: 170;
    top: 0;
    left: 0;
    max-height: 100%;

    box-sizing: border-box;
    padding: 10px;
    overflow-y: auto;

    background-color: #fff;
    box-shadow: 2px 4px 7px 1px #dedede;
  }
  .map {
    transition: all 0.6s;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
.swiper-box {
  position: relative;
  z-index: 161;

  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;

  width: 100%;

  transition: transform ease-in 0.6s;
  transform: translateX(0);
  white-space: nowrap;
  .swiper-item {
    width: 100%;
    height: $map_height;
  }
}
.hide-text-area {
  transform: translateX(-100%);
}
.gray-map {
  filter: grayscale(90%);
}
.longlat {
  margin-top: 15px;
  padding-bottom: 15px;

  ul {
    li {
      padding: 6px;
      background-color: #ddd;
      border-radius: 4px;
      margin-bottom: 15px;
      font-size: 14px;
      color: #666;
      position: relative;
    }
  }
}
.el-icon-close {
  display: inline-block;
  position: absolute;
  right: 10px;
  color: #000 !important;
  cursor: pointer;
}
.my-button {
  margin-bottom: 10px;
}
</style>

 三、第二种画化：使用AMap.MouseTool画多边形（效果是：多边形随鼠标左键点击，多边形直接跟着变化）

// 新增 编辑 查看 
<template>
  <div class="point">
    <el-header></el-header>
    <div class="action-bar">
      <el-form class="inline-form" :rules="rules" ref="formData" size="small" :model="formData">
        <el-form-item label  prop="location">
          <el-input
            :disabled="!ifFalg"
            class="name-input"
            clearable
            v-model="formData.location"
            placeholder="名称"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item label  prop="longitude">
          <el-input
            :disabled="!ifFalg"
            class="my-input"
            clearable
            v-model.number="formData.longitude"
            placeholder="经度 "
          ></el-input>
        </el-form-item>
        <el-form-item label  prop="latitude">
          <el-input
            :disabled="!ifFalg"
            class="my-input"
            clearable
            v-model.number="formData.latitude"
            placeholder="纬度"
          ></el-input>
        </el-form-item>
        <el-button class="my-button" v-if="ifFalg" type="primary" @click="save" size="small">保存</el-button>
        <el-button class="my-button" size="small" @click="close">关闭</el-button>
      </el-form>
    </div>
    <div class="map-box">
      <div class="map-tool">
        <div v-if="ifFalg">
          <el-checkbox >地图上描点</el-checkbox>
        </div>
        <div class="longlat">
          <ul><li v-for="(item, index) in lnglatpoints" :key="index">
              {{item.longitude}} , {{item.latitude}}
              <i
                v-if="ifFalg"
                class="el-icon-close"
                @click="deletes(item)"
              ></i>
            </li> 
          </ul>
          <br>
          <div>
            <span >输入范围经纬度：</span>
           <el-input
               type="textarea"
               autosize
               placeholder="请输入内容"
               v-model="lnglatpointsString">
            </el-input>
          </div>
          <el-button v-if="ifFalg" size="small" @click="clear1" type="primary" class="claer1">确定</el-button>
          <el-button v-if="ifFalg" size="small" @click="clear" type="primary" class="claer">清除</el-button>
        </div>
      </div>
      <div class="map" id="map">
        <el-amap
          ref="map"
          bubble
          :zoom="map.zoom"
          :center="map.center"
          :events="mapEvents"
          id="amap"
        >
          <el-amap-polygon
            :events="plugin.events"
            :path="path"
            fillColor="#2b83f9"
            fillOpacity="0.5"
            strokeWeight="0"
            strokeColor="#2b83f9"
            strokeOpacity="0.5"
          ></el-amap-polygon>
          <el-amap-marker v-if="formData.type === 1" :position="map.center" :label="label"></el-amap-marker>
        </el-amap>
    
      </div>
      <div class="my-tools">
        <el-row>
          <el-button type="primary" v-if="ifFalg" @click="drawPolygon()">鼠标绘制</el-button>
          <el-button type="primary" v-if="ifFalg" @click="polygonEditor.close()">结束编辑</el-button>
        </el-row>
    </div>
    </div>
  </div>
</template>
<script lang="ts">同上
 /**
   * 绘制多边形 
   */
  private drawPolygon () {
         let vm: any = this
         let map = vm.$refs.map.$$getInstance()
         map.plugin([\'AMap.MouseTool\'], function () {
           var mouseTool = new AMap.MouseTool(map)
          var drawPolygon = mouseTool.polygon()
           AMap.event.addListener(mouseTool, \'draw\', function (e: any) {
             e.obj.Je.visible = false
             let path = e.obj.getPath()
                vm.drawPolygonsToMap(path)
              
               path.forEach((point:any) => {
                    vm.lnglatpoints.push({
                      latitude: point.lat,
                     longitude: point.lng
                    })
               });
               // vm.mapDates =path  
               // e.obj.hide()
               mouseTool.close()
           })
         })
       
  }
同上
}
</script>
<style lang="scss" scoped>
和上面一样
</style>

三、第三种画化：使用AMap.Polygon和AMap.PolyEditor画多边形（推荐，效果是：https://lbs.amap.com/api/javascript-api/example/overlayers/polygon-draw-and-edit）

　　注意哦：1、以为这种画多边形，先需要3个点来确定初始的多边形，所以添加了一个功能：搜索 （功能：点击搜索名称的经纬度；）；

　　　　　　2、然后我再 ‘范围绘制’ 的方法里根据“搜索”得来的经纬度，手动的弄了3个经纬度数组。

　　　　　　3、然后就可以快乐的画图了。（这画图是真的方便，特别是画范围很复杂的）

// 新增 编辑 查看 
<template>
  <div class="point">
    <el-header></el-header>
    <div class="action-bar">
      <el-form class="inline-form" :rules="rules" ref="formData" size="small" :model="formData">
        <el-form-item label  prop="location">
          <el-input
            :disabled="!ifFalg"
            class="name-input"
            clearable
            v-model="formData.location"
            placeholder="名称"
            maxlength="30"
          ></el-input>
        </el-form-item>
　　　　　<el-button class="my-button"  type="info" @click="getLocation" size="small">搜索</el-button>

        <el-form-item label  prop="longitude">
          <el-input
            :disabled="!ifFalg"
            class="my-input"
            clearable
            v-model.number="formData.longitude"
            placeholder="经度 "
          ></el-input>
        </el-form-item>
        <el-form-item label  prop="latitude">
          <el-input
            :disabled="!ifFalg"
            class="my-input"
            clearable
            v-model.number="formData.latitude"
            placeholder="纬度"
          ></el-input>
        </el-form-item>
        <el-button class="my-button" v-if="ifFalg" type="primary" @click="save" size="small">保存</el-button>
        <el-button class="my-button" size="small" @click="close">关闭</el-button>
      </el-form>
    </div>
    <div class="map-box">
      <div class="map-tool">
        <div v-if="ifFalg">
          <el-checkbox >地图上描点</el-checkbox>
        </div>
        <div class="longlat">
          <ul>
           <li v-for="(item, index) in lnglatpoints" :key="index">
              {{item.longitude}} , {{item.latitude}}
              <i
                v-if="ifFalg"
                class="el-icon-close"
                @click="deletes(item)"
              ></i>
            </li> 
          </ul>
          <br>
          <div>
            <span >输入范围经纬度：</span>
           <el-input
               type="textarea"
               autosize
               placeholder="请输入内容"
               v-model="lnglatpointsString">
            </el-input>
          </div>
          <el-button v-if="ifFalg" size="small" @click="clear1" type="primary" class="claer1">确定</el-button>
          <el-button v-if="ifFalg" size="small" @click="clear" type="primary" class="claer">清除</el-button>
        </div>
      </div>
      同上
      <div class="my-tools">
        <el-row>
          <el-button type="primary" v-if="ifFalg" @click="drawPolygon()">鼠标绘制</el-button>
          <el-button type="primary" v-if="ifFalg" @click="polygonEditor.close()">结束编辑</el-button>
        </el-row>
    </div>
    </div>
  </div>
</template>
<script lang="ts">
同上

//画多边形    private drawPolygon(){     let vm: any = this     if (vm.formData.location === \'\' || vm.formData.location === null) {       this.$message.warning(\'请先输入名称，才能开始画范围！\')       return     }     let  map = new AMap.Map("map", {         center:[106.55073, 29.56471],         zoom: 15     });      // 多边形覆盖物节点坐标数组     let polygonArr:any = []      let lng = Number(this.formData.longitude)      let lat = Number(this.formData.latitude)      if(vm.path.length > 0){         polygonArr = vm.path     }else{        polygonArr.push([lng, lat])        polygonArr.push([lng, lat - 0.001])        polygonArr.push([lng - 0.001, lat - 0.001])     }        //使用 AMap.Polygon构建多边形     let polygon = new AMap.Polygon({         path:polygonArr,         strokeColor: "#FF33FF",          strokeWeight: 6,         strokeOpacity: 0.2,         fillOpacity: 0.4,         fillColor: \'#1791fc\',         zIndex: 50,     })     //将多边形增加到地图上     map.add(polygon)     // 缩放地图到合适的视野级别     map.setFitView([ polygon ])     //构造折线编辑对象，并开启折线的编辑状态     map.plugin(["AMap.PolyEditor"],function(){      let polygonEditor = new AMap.PolyEditor(map,polygon);          vm.polygonEditor =polygonEditor         polygonEditor.open();        //关闭多边形编辑polygonEditor.close()触发该方法；        polygonEditor.on(\'end\', function(event:any) {         // event.target 即为编辑后的多边形对象,event.target.getPath()得到编辑完成后的点数组         let pointArr = event.target.getPath()         vm.lnglatpoints = []         pointArr.forEach((point:any)=>{           vm.lnglatpoints.push({latitude: point.lat,longitude: point.lng})         }) 　　　　 vm.path = []         vm.lnglatpoints.map((val: any, index: number) => {        let arr = [val.longitude, val.latitude]        vm.path.push(arr)        if (index === 0) {         vm.map.center = [val.longitude, val.latitude]        }      })     })     });   }   /**    * 地理编码（地址 -> 坐标）    */   private getLocation () {    let loc = this.formData.location     AMap.plugin(\'AMap.Geocoder\', () => {       let geocoder = new AMap.Geocoder()       geocoder.getLocation(loc, (status: string, result: any) => {         if (status === \'complete\' && result.info === \'OK\') {           let { lat, lng } = result.geocodes[0].location           if (lat && lng) {             this.map.center = [lng, lat]             this.formData.longitude=lng             this.formData.latitude=lat           }         }       })     })   }

  同上
}
</script>
<style lang="scss" scoped>
和上面一样
</style>

 

123