vue在element-ui的dialog弹出框中加入百度地图

参考：https://blog.csdn.net/u012724595/article/details/82703579

    
    
      
      

        关 闭
        
      
    

import {
  BaiduMap,
  BmScale,
  BmNavigation,
  BmOverviewMap,
  BmCityList,
  BmMarker,
  BmControl,
  BmView,
  BmAutoComplete,
  BmLocalSearch
} from "vue-baidu-map";

方法： 

    // 百度地图方法
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      var i = 0, valLen = val.length;
 
      if (valLen == 0) {
        this.locData.ids = 0;
      } else {
        for (i; i < valLen; i++) {
          if (i == 0) {
            this.locData.ids = val[i].id;
          } else if (i > 0) {
            this.locData.ids += "," + val[i].id;
          }
        }
      }
    },
 
    // 当某一行被点击时会触发该事件   参数：row, event, column
    getRowData(editEqu, event, column) {
      this.$refs.equTable.toggleRowSelection(editEqu);
    },
 
    // 设置定位弹出框
    setLoc(formName) {
      if (this.locData.ids == 0) {
        this.$message({
          message: '请选中装备后再设置定位',
          type: 'warning'
        });
      } else {
        this.locDialog = true;
        map.clearOverlays();
      }
    },
    // 百度地图
    mapReady ({BMap, map}) {
      this.center.lng = 116.404;
      this.center.lat = 39.915;
      this.zoom = 15;
      window.map = map;   //将map变量存储在全局
    },
    // 地图点击事件
    getClickInfo (e) {
      map.clearOverlays();
      var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));
      map.addOverlay(myMarker);
      this.locData.longitude = e.point.lng;
      this.locData.latitude = e.point.lat;
    },
    // 设置定位确认
    locSubmit(formName) {
      if (this.locData.longitude == "") {
        addOper.$message({
          message: '请单击地图设置定位后再提交',
          type: 'warning'
        });
      } else {
        //  向后台提交locData数据
      }
      this.locDialog = false;
    },
    // 设置定位取消
    locCancle(formName) {
      map.clearOverlays();
      this.locDialog = false;
    }
  }