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自定义信息窗口,官网案例

总结

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

相关文章

  • element ui el-calendar日历组件使用方法总结

    element ui el-calendar日历组件使用方法总结

    这篇文章主要给大家介绍了关于element ui el-calendar日历组件使用方法的相关资料,elementui是一款基于Vue.js的UI框架,其中的日历组件calendar是elementui中非常常用的组件之一,需要的朋友可以参考下
    2023-07-07
  • 总结vue映射的方法与混入的使用过程

    总结vue映射的方法与混入的使用过程

    这篇文章主要介绍了总结vue映射的方法与混入的使用过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue更改数组中的值实例代码详解

    vue更改数组中的值实例代码详解

    这篇文章主要介绍了vue更改数组中的值,本文通过两个例子,给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • vue element-ui el-table组件自定义合计(summary-method)的坑

    vue element-ui el-table组件自定义合计(summary-method)的坑

    这篇文章主要介绍了vue element-ui el-table组件自定义合计(summary-method)的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • vue axios数据请求及vue中使用axios的方法

    vue axios数据请求及vue中使用axios的方法

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,在vue中数据请求需要先安装axios。这篇文章主要介绍了vue axios数据请求及vue中使用axios的方法,需要的朋友可以参考下
    2018-09-09
  • vue3和vue2中mixins的使用解析

    vue3和vue2中mixins的使用解析

    这篇文章主要介绍了vue3和vue2中mixins的使用解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 深入理解vue.js中的v-if和v-show

    深入理解vue.js中的v-if和v-show

    这篇文章主要给大家深入的介绍了关于vue.js中v-if和v-show的相关资料,文中详细介绍两者的共同点和区别,通过图文介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • 基于elementUI使用v-model实现经纬度输入的vue组件

    基于elementUI使用v-model实现经纬度输入的vue组件

    这篇文章主要介绍了基于elementUI使用v-model实现经纬度输入的vue组件,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue中created和mounted使用场景分析

    Vue中created和mounted使用场景分析

    vue.js中created方法是一个生命周期钩子函数,一般可以在created函数中调用ajax获取页面初始化所需的数据,这篇文章主要介绍了Vue中created和mounted使用场景分析,需要的朋友可以参考下
    2023-05-05
  • Vue.directive 自定义指令的问题小结

    Vue.directive 自定义指令的问题小结

    这篇文章主要介绍了Vue.directive 自定义指令的问题小结,需要的朋友可以参考下
    2018-03-03

最新评论