高德地图api，利用鼠标工具完成电子围栏-----圆形，矩形，自定义并获取坐标

需求：根据下拉框选择的不同，在地图上绘制不同的图形并获取坐标。这篇文章只完成了部分功能，电子围栏最终版在我的另一篇文章中，大家可以选择性查看。电子围栏终版

注意，这个要在全局中引入amap

1，先下载amap

2，main.js中全局注册

// 地图组件
import VueAMap from 'vue-amap'
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.4uiVersion: '1.0.11'
})

页面代码：需要操作DOM，因此要把js代码放入mounted中

<template><el-dialog:append-to-body="true":visible.sync="dialog":title="isAdd ? '新增' : '编辑'":close-on-click-modal="false":before-close="resetForm"width="1200px"><div class="container"><div class="sidebar"><el-formref="form":model="form":rules="rules"size="small"label-width="210px"><el-form-item label="围栏类型：" prop="fenceType"><el-selectv-model="form.fenceType"placeholder=""style="width: 240px"@change="selChange"><el-optionv-for="item in supThis.dict['fenceType']":key="item.id":label="item.dictValue":value="item.dictKey"/></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="cancel">取消</el-button><el-button :loading="loading" type="primary" @click="doSubmit">提交</el-button></div><div><Button @click="addFence" v-show="false">添加围栏</Button><Button @click="removeFence">清除围栏</Button></div></div><div class="map"><el-amapref="map"class="amap-box":zoom="12":plugin="mapInfo.plugin":events="mapInfo.events":amap-manager="amapManager"/></div></div></el-dialog>
</template><script>
import VueAMap from "vue-amap";
let amapManager = new VueAMap.AMapManager();export default {inject: ["reload"],name: "Form",data() {return {form: {fenceType: null,},amapManager,zoom: 12,center: [106.5572085, 29.6154994],events: {init(o) {this.mapInfo.map = o;},},searchOption: {city: "重庆",citylimit: false,},fenceForm: {coordinate: [],},type: null,mouseTool: null,overlays: [],rules: {fenceType: [{ required: true, message: "请选择围栏类型", trigger: "change" },]},deptOption: [],point: [],};},created() {},mounted() {// this.init()},methods: {selChange(type) {// console.log(type);// console.log(typeof type);if (type === "1") {this.addFence("circle");} else if (type === "2") {this.addFence("rectangle");} else if (type === "3") {this.addFence("polygon");} else {return;}},addFence(type) {console.log(111);this.type = type;// console.log(res);let _this = this;let map = amapManager.getMap();if (this.fenceForm.coordinate.length > 0) {this.$Message.error("围栏已存在!");return;}if (this.type) {map.remove(this.type);}map.plugin(["AMap.MouseTool"], function () {let mouseTool = new AMap.MouseTool(map);_this.mouseTool = mouseTool;//添加事件if (type === "circle") {mouseTool.circle();} else if (type === "rectangle") {mouseTool.rectangle();} else if (type === "polygon") {mouseTool.polygon();} else {return;}AMap.event.addListener(mouseTool, "draw", function (e) {_this.fenceForm.coordinate = [];let path = e.obj.getPath();path.forEach((e) => {_this.fenceForm.coordinate.push([e.getLng(), e.getLat()]);});mouseTool.close(false);console.log(e.obj.getPath()); //获取路径/范围});});},removeFence() {this.form.fenceType = "";this.fenceForm.coordinate = [];if (this.mouseTool) {this.mouseTool.close(true);}if (this.type) {amapManager.getMap().remove(this.type);}},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;}},resetForm() {this.dialog = false;this.$refs["form"].resetFields();for (const key in this.form) {if (this.form[key] instanceof Array) this.form[key] = [];else this.form[key] = null;}},},
};
</script><style lang="scss" scoped>
.container {display: flex;.sidebar {width: 500px;margin: 0 20px 0 0;.dialog-footer {text-align: center;}}.map {flex: 1;}
}
</style>

高德地图api，利用鼠标工具完成电子围栏-----圆形，矩形，自定义并获取坐标相关推荐

Android 高德地图API（详细步骤+源码）
高德地图API使用详解前言正文一.创建应用 ① 获取PackageName ② 获取调试版安全码SHA1 ③ 获取发布版安全码SHA1 二.配置Android Studio工程 ① 导入SDK ...
利用高德地图API获取任意两座城市之间的距离！异地也有惊喜！
工作中有时会遇到这样一种场景:年末需要统计所有员工该年的航旅出差情况,然后根据他们的飞行距离补贴一定的交通费.例如如下所示情况: 然而,如果我们使用地图APP等工具逐一进行手工查询,在一家规模稍大的公 ...
android 地铁地图api,利用高德地图api绘制公交+地铁的等时圈
等时圈是指从某点出发,以某种交通方式在特定时间内能到达的距离覆盖的范围,在可达性分析中十分常见.原本我们需要将地图栅格化不停地调用路径规划api来获得等时圈,现在已经有网站为我们做好了这些工作,比如h ...
python调用高德地图api 可视化_Python：利用高德地图API实现找房
记:本项目是在实验楼上看到的,但是上面的代码由于没有及时维护,爬虫文件的代码不再能完整的把所有房源信息爬取下来,我根据最新的58同城官网进行了研究,现在的官网的房源信息已经不是分页的了,而是拉到最后自 ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
python高德地图api调用实例_Python 利用高德地图api实现经纬度与地址的批量转换...
我们都知道,可以使用高德地图api实现经纬度与地址的转换.那么,当我们有很多个地址与经纬度,需要批量转换的时候,应该怎么办呢? 在这里,选用高德Web服务的API,其中的地址/逆地址编码,可以实现经纬 ...
利用高德地图api进行定位
一.精准定位,需要https,需要用户手动同意. 在初次进入时进行定位,定位成功,保存定位所在城市.再次进入不定位,使用上一次的定位. 1.首先引入高德地图api <script type=&q ...
百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数 ...
项目 - Web地图开发【高德地图API】(一)
导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...

高德地图api，利用鼠标工具完成电子围栏-----圆形，矩形，自定义并获取坐标

需求：根据下拉框选择的不同，在地图上绘制不同的图形并获取坐标。这篇文章只完成了部分功能，电子围栏最终版在我的另一篇文章中，大家可以选择性查看。电子围栏终版

注意，这个要在全局中引入amap

1，先下载amap

2，main.js中全局注册

页面代码：需要操作DOM，因此要把js代码放入mounted中

高德地图api，利用鼠标工具完成电子围栏-----圆形，矩形，自定义并获取坐标相关推荐

最新文章

热门文章