Vue如何使用百度地图自定义信息窗口InfoWindow的样式

 更新时间:2024年03月19日 10:24:16   作者:听听那晚风  
这篇文章主要介绍了Vue如何使用百度地图自定义信息窗口InfoWindow的样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

效果

1.首先可以找到百度地图信息窗口的class名

根据class名去修改样式

我这里只修改了标题的样式

//百度地图信息弹窗标题
.BMap_bubble_title{
  font-weight: 700!important;
  margin-bottom: 10px;
  font-size: 16px;
}

2.窗口中心内容的样式

是自己写标签以及样式

var marker = new BMap.Marker(new BMap.Point(112.14,22.125));
map.addOverlay(marker)
var opts = {
              width: 300, // 信息窗口宽度
              height: 150, // 信息窗口高度
              title: "设备信息", // 信息窗口标题
              message: "",
            };
            var infoWindow = new BMap.InfoWindow(
              `<span style='display:inline-block;width:60px; text-align: right;font-weight:700'>MEID:</span>`+res.data.data[i].meid+
                "<br/>" +
                `<span style='display:inline-block;width:60px; text-align: right;font-weight:700'>手机号:</span>` +
                res.data.data[i].mobile +
                "<br/>" +
                `<span style='display:inline-block;width:60px; text-align: right;font-weight:700'>状态:</span>` +
                res.data.data[i].devStatusStr +
                "<br/>" +
                `<span style='display:inline-block;width:60px; text-align: right;font-weight:700'>版本:</span>`+
                res.data.data[i].osVersion +
                "<br/>" +
                `<span style='display:inline-block;width:60px; text-align: right;font-weight:700'>性能:</span>`+
                "CPU:" +
                res.data.data[i].perCpu +
                "&nbsp&nbsp" +
                "RAM:" +
                res.data.data[i].perRam +
                "&nbsp&nbsp" +
                "DISK:" +
                res.data.data[i].perDisk,
              opts
            );
            //点击标注点要发生的事
            marker.addEventListener("click", function () {
              this.openInfoWindow(infoWindow);
            });
            // 鼠标移开标注点要发生的事
            marker.addEventListener("mouseout", function () {
              this.closeInfoWindow(infoWindow);
            });

我这里的res.data.data[i].meid 是后端返的参数值,思路就这样,具体样式根据自身需求去改变吧。

如果还实现不了需求 可以尝试用InfoBox自定义信息窗口,官网案例

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue.js实现简单轮播图效果

    vue.js实现简单轮播图效果

    这篇文章主要为大家详细介绍了vue.js实现简单轮播图效果的相关代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • Vue中的this.$options.data()和this.$data用法说明

    Vue中的this.$options.data()和this.$data用法说明

    这篇文章主要介绍了Vue中的this.$options.data()和this.$data用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • element el-select下拉框选择失效解决办法

    element el-select下拉框选择失效解决办法

    el-select即选择器用于从若干个候选项中选择其中一个(或者多个),在传统网页开发中选择器经常被称作下拉框、下拉列表是最常用的表单元素之一,这篇文章主要给大家介绍了关于element el-select下拉框选择失效解决办法,需要的朋友可以参考下
    2023-08-08
  • vue-router 实现导航守卫(路由卫士)的实例代码

    vue-router 实现导航守卫(路由卫士)的实例代码

    这篇文章主要介绍了vue-router 实现导航守卫(路由卫士)的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Vue3 路由配置与导航实战教程

    Vue3 路由配置与导航实战教程

    Vue Router 提供了强大的路由管理能力,帮助开发者轻松构建流畅、高效的单页应用,本文将带你深入探讨 Vue3 中的路由配置与导航操作,从安装到实战,手把手教你掌握 Vue Router 的使用技巧,需要的朋友可以参考下
    2025-03-03
  • element-plus报错ResizeObserver loop limit exceeded解决办法

    element-plus报错ResizeObserver loop limit exceeded解决办法

    这篇文章主要给大家介绍了关于element-plus报错ResizeObserver loop limit exceeded的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • 解决chunk-vendors.js语法错误问题

    解决chunk-vendors.js语法错误问题

    在遇到chunk-vendors.js文件的语法错误时,可以尝试在vue.config.js文件中添加transpileDependencies参数进行配置,这通过明确指示哪些依赖需要被babel转译,从而帮助解决编译过程中的语法问题,此方法适用于Vue项目中遇到的相关错误,希望能帮助到遇到同样问题的开发者
    2024-10-10
  • Vue2实现txt文件在线预览的代码示例

    Vue2实现txt文件在线预览的代码示例

    txt文件在线预览不需要下载另外的插件,主要有两种形式,一种是上传完成后实现预览;另一种是后端提供文件下载接口,获取文件在线地址实现预览;本文给大家介绍了Vue2实现txt文件在线预览的代码示例,需要的朋友可以参考下
    2025-01-01
  • vue实现前端控制动态路由的示例代码

    vue实现前端控制动态路由的示例代码

    本文主要介绍了vue实现前端控制动态路由的示例代码,通过这些步骤,可以有效地根据用户权限动态渲染前端路由,实现多用户权限系统,感兴趣的可以了解一下
    2025-04-04
  • vue3 pinia使用及持久化注册

    vue3 pinia使用及持久化注册

    本文介绍了Pinia的使用方法及如何实现状态持久化存储,首先,介绍了Pinia的安装和在main.ts中的挂载,介绍了getters和actions的使用方法,最后,详细说明了如何通过Pinia-plugin-persistedstate插件实现Pinia状态的持久化处理,包括插件的安装、配置和在main.ts文件中的注册
    2024-10-10

最新评论