点击获取坐标（点Marker）

官网链接：Vue Baidu Map

需求

1.点击某点设置该点为中心点

2.获取点的经纬度

3.确定选取成功，取消就不赋值。 

实现步骤

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

项目坐标

第二步：设置初始值

data() {return {center: { lng: 118.83, lat: 31.95 },zoom: 13,adr: '',dialogVisible: false,}
}

第三步：打开弹窗，将中心点清空，如果是编辑状态将经纬度赋值给弹窗中的经纬度。

clickAddress() {this.dialogVisible = true;this.adr = this.form.latLnglet latLng = this.adr.split(',')this.center = {lng: latLng[0],lat: latLng[1],};
},

第四步：设置弹窗

getClickInfo 获取当前点击的经纬度，赋值中心点给marker。并且将当前经纬度显示出来

设置当前点击的位置marker点

经纬度：{{ latitude }}
取 消确 定

handler({ BMap, map }) {console.log(BMap, map);
},getClickInfo(e) {this.center.lng = e.point.lng;this.center.lat = e.point.lat;this.adr = e.point.lng + "," + e.point.lat;
},

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

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

点击获取坐标集（多边形polygon）

官网链接：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.polygonPaththis.dialogVisible = false;
}