-
安装插件包
npm install vue-amap -S // vue-amap 高德地图的插件包 npm install element-ui -S //饿了吗ui框架 npm install node-sass // 如果没有使用sass可不用安装 npm install sass-loader //如果没有使用sass可不用安装 // tips:如果安装了sass,出现运行错误,有可能是node-sass和sass-loader的版本不匹配的问题
-
main.js里面引用,高德地图平台,点我试试
import VueAMap from 'vue-amap' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) Vue.use(VueAMap) VueAMap.initAMapApiLoader({ key: '高德地图官网控制台申请的key', plugin: [ 'AMap.Autocomplete', // 输入提示插件 'AMap.PlaceSearch', // POI搜索插件 'AMap.Scale', // 右下角缩略图插件 比例尺 'AMap.OverView', // 地图鹰眼插件 'AMap.ToolBar', // 地图工具条 'AMap.MapType', // 类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制 'AMap.PolyEditor', // 编辑 折线、多边形 'AMap.CircleEditor', // 圆形编辑器插件 'MarkerClusterer', // 点聚合 'AMap.Geolocation', // 定位控件,用来获取和展示用户主机所在的经纬度位置, 'AMap.DistrictSearch', 'Geocoder' ], v: '1.4.15', // 默认高德 sdk 版本为 1.4.4 uiVersion: '1.0.11' })
-
页面预览图
-
整体代码如下
<template> <div class="container"> <div class="sidebar"> <el-select v-model="fenceType" placeholder="请选择围栏类型" style="width: 240px" @change="handleChange"> <el-option v-for="item in fenceTypeOptions" :key="item.value" :label="item.label" :value="item.value" /> </el-select> <el-button type="primary" style="margin-left:10px" @click="removeFence(true)">清除围栏</el-button> <el-button type="primary" style="margin-left:10px" @click="resetFence">重绘围栏</el-button> </div> <div class="map"> <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"> </el-amap-search-box> <el-amap ref="map" :center="center" class="amap-box" :zoom="zoom" :events="events" :amap-manager="amapManager" /> </div> </div> </template> <script> import VueAMap from "vue-amap"; let amapManager = new VueAMap.AMapManager(); export default { name: "Form", data() { return { mouseTool: null, amapManager, zoom: 12, center: [106.5572085, 29.6154994], events: { init(o) {}, }, searchOption: { city: "全国", //范围 citylimit: false, //是否限制城市内搜索 }, coordinates: [], fenceType: "", fenceTypeOptions: [ { label: "圆形", value: "circle", }, { label: "矩形", value: "rectangle", }, { label: "多边形", value: "polygon", }, ], }; }, methods: { handleChange(type) { this.removeFence(); this.addFence(type); }, addFence(type) { let self = this; if (this.coordinates.length > 0) { this.$message.error("围栏已存在!"); return; } let map = amapManager.getMap(); if (type) { map.remove(type); } map.plugin(["AMap.MouseTool"], function () { let mouseTool = new AMap.MouseTool(map); self.mouseTool = mouseTool; //添加事件 self.fenceTypeOptions.forEach((fence) => { if (fence.value === type) { mouseTool[type](); } else { return; } }); AMap.event.addListener(mouseTool, "draw", function (e) { self.coordinates = []; let path = e.obj.getPath(); path.forEach((e) => { self.coordinates.push([e.getLng(), e.getLat()]); }); mouseTool.close(false); console.group("坐标点"); console.log(e.obj.getPath()); //获取路径/范围 console.groupEnd(); }); }); }, removeFence(isShowAlert) { if (!this.coordinates.length && isShowAlert) { return this.$message.error("当前地图没有围栏,无需删除"); } this.coordinates = []; if (this.mouseTool) { this.mouseTool.close(true); } if (this.fenceType) { amapManager.getMap().remove(this.fenceType); } }, resetFence() { if (!this.fenceType) return; this.handleChange(this.fenceType); }, onSearchResult(pois) { let latSum = 0; let lngSum = 0; if (pois.length > 0) { pois.forEach((poi) => { let { lng, lat } = poi; lngSum += lng; latSum += lat; }); let center = { lng: lngSum / pois.length, lat: latSum / pois.length, }; this.center = [center.lng, center.lat]; this.zoom = 15; } }, }, }; </script> <style lang="scss" scoped> .container { .map { flex: 1; height: 800px; position: relative; } .sidebar { text-align: left; margin-bottom: 10px; } .search-box { position: absolute; left: 30px; top: 30px; } } </style>
高德地图绘制矩形、多边形围栏获取坐标点
于 2023-01-13 09:51:13 首次发布