最全vue的vue-amap使用高德地圖插件畫多邊形范圍的示例代碼

更新時(shí)間：2020年07月17日 11:28:46 作者：杜鵬輝

這篇文章主要介紹了最全vue的vue-amap使用高德地圖插件畫多邊形范圍,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、在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 版本，默認(rèn)為 1.4.4
 v: '1.4.10'
})

Vue.config.productionTip = false

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

強(qiáng)烈推薦的第三種畫多邊形的效果圖：

　　***隱藏的彩蛋哦***

圖里的 “請(qǐng)輸入經(jīng)緯度” ，可以輸入一堆的經(jīng)緯度坐標(biāo)，在按“Enter” ，可以直接形成多邊形；（注意：輸入的格式要和上面顯示的坐標(biāo)全部選中Ctrl+c下來的格式一樣）

　　如：

106.628788 , 29.718379
106.631187 , 29.718143
106.632383 , 29.716281
106.628819 , 29.717013

二、第一種畫化：使用Geolocation畫多邊形（效果是在地圖點(diǎn)了，才會(huì)形成多邊形）

// 新增 編輯 查看 
<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="經(jīng)度 "
   ></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">關(guān)閉</el-button>
  </el-form>
 </div>
 <div class="map-box">
  <div class="map-tool">
  <div v-if="ifFalg">
   <el-checkbox v-model="enterType">地圖上描點(diǎn)</el-checkbox>
  </div>
  <!-- <el-checkbox @change="checkbox" v-model="enterType">地圖上描點(diǎn)</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="請(qǐng)輸入經(jīng)緯度"
   ></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('請(qǐng)輸入正確的經(jīng)度'))
 }
}
const testLatitude = (rule: any, value: string, callback: Function) => {
 if (util.regExp.latitudeRegExp.test(value)) {
 return callback()
 } else {
 return callback(new Error('請(qǐng)輸入正確的緯度'))
 }
}
@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 // 錄入坐標(biāo) | 地圖上描點(diǎn)
 private cities = []
 private formData = {
 location: '',
 longitude: '',
 latitude: ''
 }
 plugin = {
 pName: 'Geolocation',
 events: {}
 }
 events = {}
 private test = 1

 private rules = {
 location: [
  { required: true, message: '請(qǐng)輸入接送點(diǎn)名稱', 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

 // 地圖點(diǎn)擊事件
 _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()
  }
  }
 }

 // 多邊形點(diǎn)擊事件
 _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()
  })
 }

 // 移除經(jīng)緯度
 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('確認(rèn)刪除繪制的接送區(qū)域？', '刪除', {
  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(() => {})
 }

 // 輸入經(jīng)緯度
 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('經(jīng)緯度格式錯(cuò)誤！')
 }
 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('經(jīng)緯度不能小于三組！')
  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畫多邊形（效果是：多邊形隨鼠標(biāo)左鍵點(diǎn)擊，多邊形直接跟著變化）

// 新增 編輯 查看 
<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="經(jīng)度 "
   ></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">關(guān)閉</el-button>
  </el-form>
 </div>
 <div class="map-box">
  <div class="map-tool">
  <div v-if="ifFalg">
   <el-checkbox >地圖上描點(diǎn)</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 >輸入范圍經(jīng)緯度：</span>
   <el-input
    type="textarea"
    autosize
    placeholder="請(qǐng)輸入內(nèi)容"
    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()">鼠標(biāo)繪制</el-button>
   <el-button type="primary" v-if="ifFalg" @click="polygonEditor.close()">結(jié)束編輯</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個(gè)點(diǎn)來確定初始的多邊形，所以添加了一個(gè)功能：搜索（功能：點(diǎn)擊搜索名稱的經(jīng)緯度；）；

　　　　　　2、然后我再 ‘范圍繪制' 的方法里根據(jù)“搜索”得來的經(jīng)緯度，手動(dòng)的弄了3個(gè)經(jīng)緯度數(shù)組。

　　　　　　3、然后就可以快樂的畫圖了。（這畫圖是真的方便，特別是畫范圍很復(fù)雜的）。

// 新增 編輯 查看 
<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="經(jīng)度 "
   ></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">關(guān)閉</el-button>
  </el-form>
 </div>
 <div class="map-box">
  <div class="map-tool">
  <div v-if="ifFalg">
   <el-checkbox >地圖上描點(diǎn)</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 >輸入范圍經(jīng)緯度：</span>
   <el-input
    type="textarea"
    autosize
    placeholder="請(qǐng)輸入內(nèi)容"
    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()">鼠標(biāo)繪制</el-button>
   <el-button type="primary" v-if="ifFalg" @click="polygonEditor.close()">結(jié)束編輯</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('請(qǐng)先輸入名稱，才能開始畫范圍！')
   return
  }
  let map = new AMap.Map("map", {
    center:[106.55073, 29.56471],
    zoom: 15
  });
   // 多邊形覆蓋物節(jié)點(diǎn)坐標(biāo)數(shù)組
  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構(gòu)建多邊形
  let polygon = new AMap.Polygon({
    path:polygonArr,
    strokeColor: "#FF33FF", 
    strokeWeight: 6,
    strokeOpacity: 0.2,
    fillOpacity: 0.4,
    fillColor: '#1791fc',
    zIndex: 50,
  })
  //將多邊形增加到地圖上
  map.add(polygon)
  // 縮放地圖到合適的視野級(jí)別
  map.setFitView([ polygon ])
  //構(gòu)造折線編輯對(duì)象，并開啟折線的編輯狀態(tài)
  map.plugin(["AMap.PolyEditor"],function(){
   let polygonEditor = new AMap.PolyEditor(map,polygon); 
    vm.polygonEditor =polygonEditor
    polygonEditor.open(); 
   //關(guān)閉多邊形編輯polygonEditor.close()觸發(fā)該方法；
    polygonEditor.on('end', function(event:any) {
    // event.target 即為編輯后的多邊形對(duì)象,event.target.getPath()得到編輯完成后的點(diǎn)數(shù)組
    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]
    }
   })


  })
  });
 }
 /**
  * 地理編碼（地址 -> 坐標(biāo)）
  */
 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>

總結(jié)

到此這篇關(guān)于最全vue的vue-amap使用高德地圖插件畫多邊形范圍的文章就介紹到這了,更多相關(guān)vue-amap高德地圖插件畫多邊形范圍內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: