使用百度地图自定义绘点并点击弹窗

<template>
    <div>
        <div id="map_container" ref="container" class="map-container"></div>
        <input type="checkbox" v-model="xjcheck"> 巡检
    </div>
</templat>

<script>
    const carIcon = require("xxx/xxx.png");
    import {    darkStyle  } from "./darkStyle.js"; //自定义模式
    export default {
        data() {
            return {
                map: null,
                xjcheck: false,
                carView: null,
                timer: null
            }
        },
        watch: {
            xjcheck (newVal, oldVal) {
                this.destoryCar();
                if(this.timer != null){
                    clearInterval(this.timer);
                }
                if (newVal) {
                    this.loadCar(); //加载车辆信息
                    this.timer = setInterval(() => {
                        this.destoryCar();
                        this.loadCar();
                    }, 60000)
                }
             }
        },
        mounted() {
            this.init();
        },
        methods: {
            initMap() {
                // 地图初始化
                const center = [113.55934, 22.271431];
                this.map = new BMapGL.Map(this.$refs.container, {
                    restrictCenter: false,
                    maxZoom: 25,
                    minZoom: 8,
                    displayOptions: {
                        building: false,
                    },
                });
                this.map.setMapStyleV2({
                    styleJson: darkStyle
                    //参考链接https://lbsyun.baidu.com/custom/list.htm
                });
                this.map.centerAndZoom(new BMapGL.Point(center[0], center[1]), 21); //设置中心点坐标和地图级别
                this.map.enableScrollWheelZoom(true); //允许地图可被鼠标滚轮缩放
                this.map.enableKeyboard(); //启用键盘操作，默认禁用
                this.map.enableInertialDragging(); //启用地图惯性拖拽，默认禁用
                this.map.setDisplayOptions({
                    indoor: false
                });

                //监听地图缩放事件;
                this.map.addEventListener("zoomend", ()=> {   
                    this.map.setTilt(0); // 设置地图的倾斜角度
                    this.map.setHeading(0); //方向偏移
                });

                const engine = new Engine(this.map, {
                    rendering: {
                        enableAnimationLoop: true
                    }
                });
            },
            destoryCar(){
                if(this.carView != null){
                    this.carView.removeAllLayers();
                    this.carView.destroy();
                    this.carView = null;
                }
            },
            loadCar() {
                this.carView = new mapvgl.View({
                    map: this.map
                });
                this.carView.startAnimation();
                //车数据;
                this.$axios.get('xxxxx').then(res => {
                    let carData = res.data;

                    //汽车数据
                    let carList = [];
                    carData.forEach((i) => {
                        carList.push({
                            'properties': {
                                'text': i.devName,
                                "dept": i.orgName
                            },
                            'geometry': {
                                'type': 'Point',
                                'coordinates': [i.bdlng,i.bdlat]
                            }
                        });
                    });

                    //小汽车 图标
                    let carLayer = new mapvgl.IconLayer({
                        width: 72,
                        height: 42,
                        offset: [0, 0],
                        opacity: 1,
                        icon: carIcon,
                        enablePicked: true, // 是否可以拾取
                        autoSelect: true,
                        selectedIndex: -1, // 选中项
                        onClick: (e) => { // 点击事件
                            if(e.dataItem!=undefined){
                                let sContent =`<div style='margin:0;line-height:50px;'>`+
                                                        `<p style='margin-bottom: 0;font-size:30px;'> xxx：`+e.dataItem.properties.text+`</p >`+
                                                        `<p style='margin-bottom: 0;font-size:30px;'> xxx：`+e.dataItem.properties.dept+`</p >`+
                                             `</div>`;
                                let opts = {
                                    width: 600,
                                    height: 100,
                                    title: ''
                                };
                                let infoWindow = new BMapGL.InfoWindow(sContent, opts);
                                let point = new BMapGL.Point(e.dataItem.geometry.coordinates[0],e.dataItem.geometry.coordinates[1]);
                                this.map.openInfoWindow(infoWindow, point);
                            }
                        },
                     });
                     this.carView.addLayer(carLayer);
                     carLayer.setData(carList);

                     //标题 车牌号
                     var textLayer = new mapvgl.TextLayer({
                         enablePicked: true,
                         autoSelect: true,
                         selectedColor: '#f00', // 选中项颜色
                         color: '#ff0',
                         fontSize: 34,
                         offset: [0, -50],
                     });

                     this.carView.addLayer(textLayer);
                     textLayer.setData(carList);
                });
            },
        }
    }
</script>

<style scoped>
::v-deep .BMap_bubble_content{
    width: 500px !important;
    color: #fff !important;
    top: -20px !important;
    line-height: 55px !important;
    font-size: 23px !important;
}
::v-deep .BMap_bubble_pop {
    background-color: #121b4d !important;
    border: 5px solid #408bde !important;
    width: 550px !important;
    text-align: center;
}
</style>

效果图如下：