一、在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)|[^ds,.]|^d*.?d*$|(,.|.,)+|(d*.*d*,){2,}|(d*.){2,}|(d*s){2,}|(sd*.?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('保存成功!'
- 发表于 2020-07-17 17:20
- 阅读 ( 131 )
- 分类:网络文章