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

需求：vue2项目使用了百度地图，之后因为原始点标记的弹窗口样式太丑了，之后UI设计了框的样式图片后，替换原有的样式，本文章主要是更改样式和动态切换框的样式

1.参考文档

Vue-Baidu-Map 官方文档
百度开放平台

2.效果

2.1 默认点弹框样式

2.2 修改后的样式

3.步骤

3.1 下载百度地图插件

npm install vue-baidu-map

在main.js文件导入

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: ''
})

3.2 在页面导入注册使用

center：地图中心点

scroll-wheel-zoom：开启滚动缩放

zoom：缩放级别

@ready：渲染

 <BMap class="map" :center="center" :scroll-wheel-zoom="true" :zoom="zoom" @ready="bMapLoad" />

import BMap from 'vue-baidu-map/components/map/Map';
   
 components: {
        BMap
    },

3.3 隐藏百度地图原有左下角logo

:deep() {
    .BMap_cpyCtrl {
        display: none;
    }
    .anchorBL {
        display: none;
    }}

3.4 隐藏原有弹窗样式

sContentStyle：窗体的大小，一定要设置，如果设置过小，之后的图片都放不上去

  // 窗体样式
                var sContentStyle = {
                    width: 430,
                    height: 260
                };
                var infoWindow = new mapConstructor.InfoWindow(sContent, sContentStyle);

                marker.addEventListener('click', function (e) {
                    this.openInfoWindow(infoWindow);
                });

窗体先把样式全部设置为不显示

    .BMap_pop img,
    .BMap_top,
    .BMap_center,
    .BMap_bottom,
    .BMap_pop > div {
        &:not(:nth-child(9)) {
            display: none;
        }
    }

3.5添加背景图片并且动态切换

我这边是通过是否在线的状态来切换窗体样式

               // 窗体内容
                let sContent = `<div class='${element.online ? 'infowindow' : 'warningInfo'}'><p class='infowindow-title'>
          地址： ${element.address}
			</p>
      <div class='info-main'>
        <ul>
      <li>经度：${element.longitude}</li>

    </ul>
        </div></div>`;

先给这俩个设置统一的大小，注意，不能超过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.完整代码

<template>
    <div style="width: 800px; height: 800px">
        <BMap class="map" :center="center" :scroll-wheel-zoom="true" :zoom="zoom" @ready="bMapLoad" />
    </div>
</template>

<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 = `<div class='${element.online ? 'infowindow' : 'warningInfo'}'><p class='infowindow-title'>
          地址： ${element.address}
			</p>
      <div class='info-main'>
        <ul>
      <li>经度：${element.longitude}</li>

    </ul>
        </div></div>`;

                // 窗体样式
                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>

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