【vue-baidu-map】点击获取点坐标

点击获取坐标

需求

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

2.获取点的经纬度

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

实现

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

<el-button @click="clickAddress">项目坐标</el-button>

第二步：设置初始值

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

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

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

第四步：设置弹窗

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

<bm-marker> 设置当前点击的位置marker点

<el-dialog title="项目坐标" :visible.sync="dialogVisible" width="50%">
  <baidu-map
    center="江宁"
    :zoom="zoom"
    @ready="handler"
    style="height: 600px"
    @click="getClickInfo"
    :scroll-wheel-zoom="true"
  >
    
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

    <bm-marker
      :position="center"
      :dragging="true"
      animation="BMAP_ANIMATION_BOUNCE"
    >
    </bm-marker>

    <bm-geolocation
      anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
      :showAddressBar="true"
      :autoLocation="true"
    ></bm-geolocation>

  </baidu-map>

  <div class="latitude">经纬度：{{ latitude }}</div>

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

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.adr
  this.dialogVisible = false;
}