【vue

2023-12-10 19:15| 来源: 网络整理| 查看: 265

点击获取坐标集

官网链接：Vue Baidu Map

需求

1. 绘制多边形

实现

第一步：设置打开弹窗的地方

坐标集

第二步：设置初始值

data() { return { center: { lng: 118.83, lat: 31.95 }, zoom: 13, dialogVisible: false, polygonPath: [] } }

第三步：打开弹窗，将中心点清空，如果是编辑状态赋值坐标点

clickAddress() { this.dialogVisible = true; this.polygonPath = this.form.latLng.length > 0 ? this.form.latLng : [] },

第四步：设置弹窗

getClickInfo 获取当前点击的经纬度，赋值点给polygonPath。并且将所有经纬度显示出来

设置多边形

经纬度： {{item.lng}},{{item.lat}} 取消确定 handler({ BMap, map }) { console.log(BMap, map); }, getClickInfo(e) { this.polygonPath.push({lng: e.point.lng, lat: e.point.lat}) }, updatePolygonPath (e) { this.polygonPath = e.target.getPath() },

第五步：取消就直接关闭弹窗，如果确定就将弹窗中的经纬度赋值给表单中的form.latLng

dialogCancel() { this.dialogVisible = false; }, dialogSubmit() { this.form.latLng = this.polygonPath this.dialogVisible = false; }

【本文地址】

公司简介

联系我们