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

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

<!-- 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";

方法： git

// 百度地圖方法
    // 當選擇項發生變化時會觸發該事件
 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; } }