多個點位marker點擊時顯示對應的窗口信息

Vue Baidu Map API文檔： https://dafrok.github.io/vue-baidu-map/#/zh/map/baidu-map

npm install vue-baidu-map --save

插入點位頁面

<template>
    <div>
        <p style="color: #e6a23c;line-height: 24px;">提示：鼠標左鍵點擊點位選擇攝像頭，右鍵點擊刪除點位</p>
        <div :style="{height: tableHeight + 'px'}">
            <baidu-map style="height: 100%" class="map" :center="mapCenter" :zoom="18" :scroll-wheel-zoom="true"
            mapType="BMAP_SATELLITE_MAP" :inertial-dragging="false" @ready="handler">
                <bm-map-type :map-types="['BMAP_SATELLITE_MAP', 'BMAP_NORMAL_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
                <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" :offset="{width: 20, height: 70}"></bm-navigation>
                <bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
                <bm-marker v-for="(item,i) in overlays" :position="{lng: item.lng, lat: item.lat}" @click="infoWindowOpen($event, item, i)" @rightclick="rightclickEvt($event, item, i)" :key="i">
                    <bm-label v-if="item.name" :content="item.name" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -30, height: 20}"/>
                </bm-marker>
            </baidu-map>
        </div>

        <!-- select-camera 是自定義彈窗單選選擇點位名稱組件 -->
        <select-camera v-if="dialogUser" @confirmEvt="confirmUserEvt"></select-camera>

        <div style="text-align:center;margin-top: 10px;">
            <el-button type="primary" @click="saveData()">保存</el-button>
        </div>
    </div>
</template>

<script>
//selectCamera -- 是點擊點位時自定義彈窗選擇點位名稱的組件
import selectCamera from "@/components/allUserName/selectCamera";
// mapCameraChange -- 更改點位后，保存全部點位的接口
// mapCameraList -- 后后台返回的已保存點位的接口
import { mapCameraList, mapCameraChange } from "@/http/systemManagement";
export default {
    data(){
        return {
            mapCenter: {lng: 113.23726062635106, lat: 23.09034633025317},
            overlays: [],
            mapBounds: {
                ne: {lng: 110, lat: 40}, sw:{lng: 0, lat: 0}
            },
            map: null,
            dialogUser: false,
            mkIndex: null,
            tableHeight: 500
        }
    },
    methods: {
        confirmUserEvt(obj){
            // console.log('obj',obj)
            if(obj && obj.id){
                this.overlays[this.mkIndex].name = obj.name;
                this.overlays[this.mkIndex].daHuaCameraDeviceManage = {id: obj.id};
            }
            this.dialogUser = false;
        },
        // 初始化地圖
        handler ({BMap, map}) {
            this.map = map;
            this._mouseDrawingEvt(BMap, map)
        },
        // 鼠標繪圖
        _mouseDrawingEvt(BMap, map){
            //實例化鼠標繪制工具
            let drawingManager = new BMapLib.DrawingManager(map, {
                isOpen: false, //是否開啟繪制模式
                enableDrawingTool: true, //是否顯示工具欄
                drawingToolOptions: {
                    anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                    offset: new BMap.Size(10, 10), //偏離值
                    drawingModes: [BMAP_DRAWING_MARKER],
                }
            });  
            //添加鼠標繪制工具監聽事件，用於獲取繪制結果
            drawingManager.addEventListener('overlaycomplete', this._overlaycomplete);
        },
        _overlaycomplete(e){
            this.overlays.push(e.overlay.getPosition());
            // // 清除上一次繪制的圖
            this.map.removeOverlay(e.overlay);
        },
        infoWindowOpen ({type, target, point}, item, i) {
            this.dialogUser = true;
            this.mkIndex = i;
        },
        saveData(){
            let opt = {
                method:"save",
                mapCameraDeviceList: this.overlays
            }
            this._mapCameraChange(opt, '保存');
        },
        _mapCameraChange(opt, txt){
            // 更改點位后，保存全部點位的接口
            mapCameraChange(opt).then(res => {
                if (res.data.returnResult == 200) {
                    this.$message({
                        message: `${txt}成功`,
                        type: 'success'
                    });
                    this._mapCameraList();
                }
            })
        },
        _mapCameraList(){
            // 后后台返回的已保存點位的接口
            mapCameraList().then(res => {
                if (res.data.returnResult == 200) {
                    this.overlays = (res.data.returnData || []).map(e => {
                        return {
                            lat: e.lat,
                            lng: e.lng,
                            id: e.id,
                            name: (e.daHuaCameraDeviceManage || {}).name,
                            daHuaCameraDeviceManage: e.daHuaCameraDeviceManage ? {
                                id: e.daHuaCameraDeviceManage.id
                            } : null
                        }
                    })
                }
            })
        },
        rightclickEvt({type, target}, item, i){
            this.$confirm(`是否刪除`, "提示", {
                type: "warning"
            }).then(() => {
                if(item.id){
                    let opt = {
                        method: "delete",
                        id: item.id
                    }
                    this._mapCameraChange(opt, '刪除');
                } else {
                    this.overlays.splice(i, 1);
                }
            }).catch(() => {});
        }
    },
    created(){
        this._mapCameraList();
    },
    components: {
        selectCamera
    }
};
</script>

 

點擊點位時顯示相對應的信息

<template>
    <div>
        <div :style="{height: tableHeight + 'px'}">
            <baidu-map style="height: 100%" class="map" :center="mapCenter" :zoom="18" :scroll-wheel-zoom="true"
            mapType="BMAP_SATELLITE_MAP" :inertial-dragging="false" @ready="handler">
                <bm-map-type :map-types="['BMAP_SATELLITE_MAP', 'BMAP_NORMAL_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
                <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                <bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>

                <bm-marker v-for="(item,i) in overlays" :position="{lng: item.lng, lat: item.lat}" @click="infoWindowOpen($event, item)" :key="i">
                    <bm-label v-if="item.name" :content="item.name" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -30, height: 20}"/>
                </bm-marker>

                <!-- bm-info-window 顯示的是相應點位的信息，顯示視頻時可能會出現閃爍，可以使用下面彈窗形式解決 -->
                <bm-info-window  :position="itemPosition" :width="730" :height="600" :show="show" @close="infoWindowClose" @open="infoWindowOpen"
                :auto-pan="true" :close-on-click="false">
                    <div class="map-camera-name">（{{cameraName}}）攝像頭實況</div>
                    <div v-if="loading" class="map-camera-lodg">
                        <i class="el-icon-loading"></i>
                        <div>正在加載攝像頭監控數據...</div>
                    </div>
                    <div>{{currentCameraId}}</div>
                </bm-info-window>
            </baidu-map>
        </div>

        <!-- 視頻彈窗 -->
        <!-- <el-dialog :title="'（' + cameraName + '）' + '攝像頭實況'"
        :visible.sync="show" :close-on-click-modal="false" center @close="infoWindowClose">
            <div v-if="loading" class="map-camera-lodg">
                <i class="el-icon-loading"></i>
                <div>正在加載攝像頭監控數據...</div>
            </div>
            <div :id="'id_map_video' + currentCameraId" class="map-videos" ref="mapVideos"></div>
        </el-dialog> -->
    </div>
</template>

<script>
// mapCameraList -- 點位列表接口
import { mapCameraList } from "@/http/systemManagement";
export default {
    data(){
        return {
            tableHeight: 500,
            mapCenter: {lng: 113.23726062635106, lat: 23.09034633025317},
            overlays: [],
            itemPosition: {},
            currentCameraId: null,
            cameraName: "",
            show: false,
            loading:false
        }
    },
    methods: {
        // 初始化地圖
        handler ({BMap, map}) {},
        // 查看攝像頭
        infoWindowOpen ({type, target, point}, itemPas) {
            let _this = this;
            this.itemPosition = point || target.point;
            if(itemPas){
                this.loading = true;
                let item = itemPas.daHuaCameraDeviceManage;
                if(!item){
                    this.$message.error('該點位暫無攝像頭');
                    return
                }
                this.cameraName = itemPas.name;
                this.currentCameraId = item.id;
            }
            this.show = true
        },
        infoWindowClose (e) {
            this.$refs.mapVideos.innerHTML = '';
            this.show = false;
        },
        _mapCameraList(){
            mapCameraList().then(res => {
                if (res.data.returnResult == 200) {
                    this.overlays = (res.data.returnData || []).map(e => {
                        return {
                            lat: e.lat,
                            lng: e.lng,
                            id: e.id,
                            name: (e.daHuaCameraDeviceManage || {}).name,
                            daHuaCameraDeviceManage: e.daHuaCameraDeviceManage ? {
                                id: e.daHuaCameraDeviceManage.id,
                                videoAddr: e.daHuaCameraDeviceManage.videoAddr,
                                previewPic: e.daHuaCameraDeviceManage.previewPic
                            } : null
                        }
                    })
                }
            })
        },
    },
    created(){
        this._mapCameraList();
    }
};
</script>

<style lang="scss" scoped>
.map-camera-name{
    line-height: 36px;
    font-size: 18px;
    color: #303133;
    text-align: center;
}
.map-camera-lodg{
    text-align: center;
    color: #409eff;
    i{
        margin: 3px 0;
        font-size: 24px;
    }
}
.map-videos{
    width:100%;
    height:420px;
}
</style>