【vue-baidu-map】多边形polygon

点击获取坐标集

官网链接：Vue Baidu Map

需求

1. 绘制多边形

实现

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

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

第二步：设置初始值

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。并且将所有经纬度显示出来

<bm-polygon> 设置多边形

<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-polygon 
      :path="polygonPath" 
      stroke-color="blue" 
      :stroke-opacity="0.5" 
      :stroke-weight="2" 
      :editing="true" 
      @lineupdate="updatePolygonPath"
    />

  </baidu-map>

  <div class="latitude">经纬度：
    <div v-for="(item,index) in polygonPath" :key="index">{{item.lng}},{{item.lat}}</div>    
  </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.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;
}