vue2使用百度地图标记点弹出框添加背景图并且根据数据动态切换

先给这俩个设置统一的大小，注意，不能超过sContentStyle的大小，不然会被隐藏！！！

    .infowindow,
    .warningInfo {
        height: 245px !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: 0px 20px;
        font-size: 13px;
        .info-main {
            display: flex;
            ul {
                flex: 1;
                li {
                    line-height: 29px;
                }
            }
            ul:nth-child(1) {
                flex: 0 0 180px;
            }
        }
    }

之后给每个单独设置不同的背景图片

    .infowindow {
        background: url('../../../assets/img/onlineInfo.png') no-repeat;
        background-size: 100% 100%;
    }
    .warningInfo {
        background: url('../../../assets/img/offlineInfo.png') no-repeat;
        background-size: 100% 100%;
        .infowindow-title {
            color: #ffdb4c;
        }
    }

3.6 标记点动态

一样的，也是根据online来判断之后添加到地图上

                let myIcon;
                const mPoint = new mapConstructor.Point(element.longitude, element.latitude);
 
                if (element.online) {
                    myIcon = new mapConstructor.Icon(
                        require('@/assets/img/online.png'), // 在线图标
                        new mapConstructor.Size(80, 114) //宽，高
                    );
                } else {
                    myIcon = new mapConstructor.Icon(
                        require('@/assets/img/offline.png'), // 离线图标
                        new mapConstructor.Size(70, 119)
                    );
                }
                var marker = new mapConstructor.Marker(mPoint, {
                    icon: myIcon //注意icon i小写，负责图标无法显示
                    // enableDragging: true, // 拖拽
                });
                // marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                this.map.addOverlay(marker);

4.完整代码

 
<script>
import BMap from 'vue-baidu-map/components/map/Map';
import { mapMutations, mapState } from 'vuex';
let mapConstructor; // 百度地图构造函数存放容器
export default {
    components: {
        BMap
    },
    data() {
        return {
            center: {
                lng: '116.46',
                lat: '39.92'
            },
            zoom: 8,
            map: null, // 地图容器
            BMap: null, // 构造器容器
            pointsList: [
                {
                    longitude: '116.46',
                    latitude: '39.92',
                    address: '北京',
                    online: 1
                },
                {
                    longitude: '112.46',
                    latitude: '39.92',
                    address: '呼和浩特',
                    online: 0
                }
            ]
        };
    },
    mounted() {},
    methods: {
        // BMap加载触发实例化方法
        bMapLoad({ BMap, map }) {
            this.$nextTick(() => {
                // 百度地图容器全局化
                this.map = map;
                // 百度地图构造函数全局化
                mapConstructor = BMap;
                this.BMap = BMap;
                // 清除地图上的覆盖物
                this.map.clearOverlays();
                // this.map.enableScrollWheelZoom(true);
                this.map.getPanes().floatShadow.style.display = 'none'; // 清除阴影
                // this.map.setMapType(BMAP_SATELLITE_MAP); //卫星地图
                this.map.setMapType(BMAP_HYBRID_MAP); //卫星混合地图
                this.bMapPoint();
                // this.getBase();
            });
        },
        // 在百度地图上打点方法
        bMapPoint() {
            // 清空标记点
            this.map.clearOverlays();
            //  对多个经纬度点进行标注
            // console.log(this.deviceList, "获取到的数据-----------");
            // 设置地图中心点
            // this.map.centerAndZoom(this.BMap.Point(117.0, 36.4), 12);
            // console.log(this.deviceList, "获取到了设备的列表数据了没");
            this.pointsList.forEach((element) => {
                // var myIcon = new mapConstructor.Icon( // 自定义图标
                //   require("@/assets/img/icon1.png"),
                //   new mapConstructor.Size(80, 104) // 图标的宽度和高度
                // );
                // 定义两个图标，一个表示在线，一个表示离线
                let myIcon;
                const mPoint = new mapConstructor.Point(element.longitude, element.latitude);
 
                if (element.online) {
                    myIcon = new mapConstructor.Icon(
                        require('@/assets/img/online.png'), // 在线图标
                        new mapConstructor.Size(80, 114) //宽，高
                    );
                } else {
                    myIcon = new mapConstructor.Icon(
                        require('@/assets/img/offline.png'), // 离线图标
                        new mapConstructor.Size(70, 119)
                    );
                }
                var marker = new mapConstructor.Marker(mPoint, {
                    icon: myIcon //注意icon i小写，负责图标无法显示
                    // enableDragging: true, // 拖拽
                });
                // marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                this.map.addOverlay(marker);
                // 窗体内容
                let sContent = `
 : 'warningInfo'}'>
          地址： ${element.address}
			
      
        
      
经度：${element.longitude}
    
        
`;
 
                // 窗体样式
                var sContentStyle = {
                    width: 430,
                    height: 260
                };
                var infoWindow = new mapConstructor.InfoWindow(sContent, sContentStyle);
 
                marker.addEventListener('click', function (e) {
                    this.openInfoWindow(infoWindow);
                });
            });
        }
    }
};
script>
 
<style lang="scss" scoped>
.map {
    width: 100%;
    // height: calc(100vh - 240px);
    height: 100%;
}
 
:deep() {
    .BMap_cpyCtrl {
        display: none;
    }
    .anchorBL {
        display: none;
    }
    .infowindow,
    .warningInfo {
        height: 245px !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: 0px 20px;
        font-size: 13px;
        // p {
        //   line-height: 15px;
        // }
        .info-main {
            display: flex;
            ul {
                flex: 1;
                li {
                    line-height: 29px;
                }
            }
            ul:nth-child(1) {
                flex: 0 0 180px;
            }
        }
    }
    .infowindow {
        background: url('../../../assets/img/onlineInfo.png') no-repeat;
        background-size: 100% 100%;
    }
    .warningInfo {
        background: url('../../../assets/img/offlineInfo.png') no-repeat;
        background-size: 100% 100%;
        .infowindow-title {
            color: #ffdb4c;
        }
    }
    .BMap_bubble_content {
        height: 245px !important;
        width: 430px !important;
        color: #ffffff;
        font-size: 14;
    }
    .BMap_pop img,
    .BMap_top,
    .BMap_center,
    .BMap_bottom,
    .BMap_pop > div {
        &:not(:nth-child(9)) {
            display: none;
        }
    }
}
style>

文章到此结束，希望对你有所帮助~