vue在element-ui的dialog彈出框中加入百度地圖

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

    <!-- gps彈窗 -->
    <el-dialog v-dialogDrag width="500px" title="Gps位置" :visible.sync="dialogFormGps">
      <template>
        <baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true"
        ak="填自己申請的ak" ref="myMap"
        @ready="mapReady"
        @click="getClickInfo">
          <bm-scale></bm-scale>
        </baidu-map>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormGps = false">關 閉</el-button>
        <!-- <el-button type="primary" @click="addData('pojoForm')">確 定</el-button> -->
      </div>
    </el-dialog>

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;
    }
  }