使用百度地图绘点自定义弹窗_百度地图添加自定义弹窗 js

<template>
    <div>
        <div id="map_container" ref="container" class="map-container"></div>
        <input type="checkbox" v-model="zfcheck"> 政府
    </div>
</templat>
 
<script>
    const carIcon = require("xxx/xxx.png");
    import {    darkStyle  } from "./darkStyle.js"; //自定义模式
    export default {
        data() {
            return {
                map: null,
                xjcheck: zfcheck,
            }
        },
        watch: {
            zfcheck(newVal, oldVal) {
                if (newVal) {
                    this.map.clearOverlays(); //清除图层覆盖物
                    const local = new BMapGL.LocalSearch(this.map, {
                        renderOptions: { map: this.map, panel: "r-languageResult" },
                        onInfoHtmlSet: function(params, html) {
                            html.innerHTML =`<div style="font-size:30px;white-space:nowrap;font-weight: bold;">`+params.title+`</div>`+
              `<div style="font-size:30px;white-space:nowrap;">地址：`+params.address+`</div>`;
                        },
                        pageCapacity: 40
                    });
                    local.search("政府");
                } else {
                    this.map.clearOverlays(); //清除图层覆盖物
                }
            }
            //学校、医院等都可以使用这种方式自定义弹窗    
        },
        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); //方向偏移
                });
            },
        }
    }
</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;
}
::v-deep .BMap_bubble_top {
    height: 31px !important;
}
 
::v-deep .BMap_bubble_title {
    display: hidden;
    color: #fff !important;
    width: 550px !important;
    line-height: 50px !important;
}
 
::v-deep .BMap_bubble_title p {
    display: none !important;
}
 
::v-deep .BMap_bubble_title p a {
    //详情 链接
    display: none !important;
}
 
::v-deep .BMap_bubble_pop &>img {
    display: none !important;
}
</style>

效果图：