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