最全vue的vue-amap使⽤⾼德地图插件画多边形范围的⽰例代码⼀、在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'e(VueAMap)e(ElementUI)VueAMap.initAMapApiLoader({// ⾼德的keykey: '你的⾼德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.4v: '1.4.10'})Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)}).$mount('#app')强烈推荐的第三种画多边形的效果图： ***隐藏的彩蛋哦***图⾥的 “请输⼊经纬度” ，可以输⼊⼀堆的经纬度坐标，在按“Enter” ，可以直接形成多边形；（注意：输⼊的格式要和上⾯显⽰的坐标全部选中Ctrl+c下来的格式⼀样） 如：106.628788 , 29.718379106.631187 , 29.718143106.632383 , 29.716281106.628819 , 29.717013⼆、第⼀种画化：使⽤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"clearablev-model="formData.location"placeholder="名称"maxlength="30"></el-input></el-form-item><el-form-item label prop="longitude"><el-input:disabled="!ifFalg"class="my-input"clearablev-model.number="formData.longitude"placeholder="经度 "></el-input></el-form-item><el-form-item label prop="latitude"><el-input:disabled="!ifFalg"class="my-input"clearablev-model.number="titude"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}} , {{titude}}<iv-if="ifFalg"class="el-icon-close"@click="deletes(item)"></i></li></ul><el-inputv-if="ifFalg"class="my-input"size="small"clearablev-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-amapref="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 (titudeRegExp.test(value)) {return callback()} else {return callback(new Error('请输⼊正确的纬度'))}}@Component({components: {'el-header': eHeader}})export default class point extends Vue {private breadcrumbId = 0private id = ''private lngLat = ''private ifFalg = trueprivate map = {zoom: 15,center: [106.55073, 29.56471]}private path: any = []private draggable = falseprivate lnglatpoints: any = []private enterType = false // 录⼊坐标 | 地图上描点private cities = []private formData = {location: '',longitude: '',latitude: ''}plugin = {pName: 'Geolocation',events: {}}events = {}private test = 1private rules = {location: [{ required: true, message: '请输⼊接送点名称', trigger: 'blur' } ],longitude: [{ validator: testLongitude, trigger: 'blur' }],latitude: [{ validator: testLatitude, trigger: 'blur' }]}mounted() {this.id = this.$route.params.idthis.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.lnglatthis.lnglatpoints.push({latitude: t,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, titude]}let arr = [val.longitude, titude]this.path.push(arr)})// this.setFitView()}}}// 多边形点击事件_this.plugin.events = {click: (e: any) => {if (this.enterType) {this.path = []console.log(e.lnglat)let lnglat = e.lnglatthis.lnglatpoints.push({latitude: t,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, titude]}let arr = [val.longitude, titude]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.datathis.formData = responselet points = res.data.data.pointsif (points != null) {for (let i = 0; i < points.length; i++) {points[i].id = i}this.lnglatpoints = pointsthis.lnglatpoints.map((val: any, index: number) => {if (index === 0) {this.map.center = [val.longitude, titude]}let arr = [val.longitude, titude]this.path.push(arr)})} else {this.map.center = [Number(this.formData.longitude),Number(titude)]bel.content = this.formData.location}setTimeout(this.setFitView, 0)} else {this.$message.error(res.data.message)}loading.close()})}// 移除经纬度deletes(data: any) {let e: any = thisthis.path = []for (let i = 0; i < e.lnglatpoints.length; i++) {if (titude === 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, titude]this.path.push(arr)if (index === 0) {this.map.center = [val.longitude, titude]}console.log(this.path)})}clear() {this.$confirm('确认删除绘制的接送区域？', '删除', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {let self: any = thisthis.path = []this.lnglatpoints = []// this.map.center = [106.5507300000, 29.5647100000]this.lngLat = ''self.formData.points = []}).catch(() => {})}// 输⼊经纬度submitEnter() {// eslint-disable-next-lineconst 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+$/gthis.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, titude]this.path.push(arr)this.lngLat = ''if (index === 0) {this.map.center = [val.longitude, titude]}})}setFitView() {const vm: any = thislet map = vm.$refs.map.$$getInstance()map.setFitView()}close() {this.$router.push({name: 'pointList'})}save() {let e: any = thislet params: any = {}if (this.id !== '-1') {// 编辑e.formData.id = this.idparams.id = this.id}e.formData.points = this.lnglatpointsif (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.lnglatpointsparams.location = this.formData.locationparams.longitude = this.formData.longitudetitude = titudeif (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"clearablev-model="formData.location"placeholder="名称"maxlength="30"></el-input></el-form-item><el-form-item label prop="longitude"><el-input:disabled="!ifFalg"class="my-input"clearablev-model.number="formData.longitude"placeholder="经度 "></el-input></el-form-item><el-form-item label prop="latitude"><el-input:disabled="!ifFalg"class="my-input"clearablev-model.number="titude"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}} , {{titude}}<iv-if="ifFalg"class="el-icon-close"@click="deletes(item)"></i></li></ul><br><div><span >输⼊范围经纬度：</span><el-inputtype="textarea"autosizeplaceholder="请输⼊内容"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-amapref="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 = thislet 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 = falselet path = e.obj.getPath()vm.drawPolygonsToMap(path)path.forEach((point:any) => {vm.lnglatpoints.push({latitude: t,longitude: point.lng})});// vm.mapDates =path// e.obj.hide()mouseTool.close()})})}同上}</script><style lang="scss" scoped>和上⾯⼀样</style> 注意哦：1、以为这种画多边形，先需要3个点来确定初始的多边形，所以添加了⼀个功能：搜索（功能：点击搜索名称的经纬度；）； 2、然后我再 ‘范围绘制' 的⽅法⾥根据“搜索”得来的经纬度，⼿动的弄了3个经纬度数组。
