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脚手架项目创建步骤详解

    vue脚手架项目创建步骤详解

    这篇文章主要介绍了vue脚手架项目创建步骤详解,文章讲解的很清晰,初学者可以跟着步骤学习下
    2021-03-03
  • vue中wangEditor5编辑器的基本使用

    vue中wangEditor5编辑器的基本使用

    wangEditor是一个轻量级web富文本编辑器,配置方便,使用简单,下面这篇文章主要给大家介绍了关于vue中wangEditor5编辑器的基本使用,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue在线动态切换主题色方案

    vue在线动态切换主题色方案

    这篇文章主要介绍了vue在线动态切换主题色方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • vue.js计算属性computed用法实例分析

    vue.js计算属性computed用法实例分析

    这篇文章主要介绍了vue.js计算属性computed用法,结合实例形式分析了vue.js使用computed方式进行属性计算的相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • setup+ref+reactive实现vue3响应式功能

    setup+ref+reactive实现vue3响应式功能

    这篇文章介绍了通过setup+ref+reactive实现vue3响应式功能,文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • Vue项目部署到jenkins的实现

    Vue项目部署到jenkins的实现

    本文主要介绍了Vue项目部署到jenkins的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 十分钟带你读懂Vue中的过滤器

    十分钟带你读懂Vue中的过滤器

    过滤器提供给我们的一种数据处理方式。过滤器功能不是必须要使用的,因为它所实现的功能也能用计算属性或者函数调用的方式来实现。这篇文章主要为大家介绍了Vue中过滤器的使用,需要的可以了解一下
    2023-03-03
  • Vue动态权限登录实现(基于路由与角色)

    Vue动态权限登录实现(基于路由与角色)

    很多应用都会需要对不同的用户进行权限控制,本文主要介绍了Vue动态权限登录实现(基于路由与角色),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • Vue如何动态改变列表搜索出关键词的字体颜色

    Vue如何动态改变列表搜索出关键词的字体颜色

    这篇文章主要介绍了Vue如何动态改变列表搜索出关键词的字体颜色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue3中使用v-model实现父子组件数据同步的三种方案

    vue3中使用v-model实现父子组件数据同步的三种方案

    这篇文章主要介绍了vue3中使用v-model实现父子组件数据同步的三种方案,如果只有一个匿名v-model的传递的话,可以使用vue3.3新添加的编译宏,defineModel来使用,每种方案结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-10-10

最新评论