百度地图InfoWindow信息窗口的自定义和样式修改

本文探讨如何在Vue项目中修改百度地图官方InfoWindow样式,包括直接在原有样式基础上进行修改和完全重写自定义覆盖物。在直接修改样式时,需要注意div的层次结构和使用!important来覆盖默认样式。而重写覆盖物则要求更深入的代码功底,虽然复杂,但能实现更多自定义效果和交互性。
摘要由CSDN通过智能技术生成

最近捣腾百度地图,在做标志物点击事件显示信息窗口时,发现官方的信息窗口只给了固定的样式,且比较普通。那么该如何想修改成自己想要的样式?

1.在官方给出的原基础上进行修改

了解这种方法有助于你理解官方的信息窗口结构。这里我拿官方示例来进行举例:纯文字信息窗口
1.我们平时想要修改js生成的样式或者不是自己写的的样式时,需要找到其类名或者id名,然后在全局样式下进行修改。
2.所以我们直接打开控制台,解析结构,重点来了:发现官方的信息窗口内部是由9个div组成的,具体按照顺序分布情况是上面三个(左上、中间、右上(包括那个叉。。)),中间一个横向的div,下面三个(左下、中间、右下),第8个是最下面那个角,第九个又回到中间是个小的div。文字描述有些抽象,多在实例上看一看就熟悉了。

这里放出左上div
在这里插入图片描述
3.那么知道这些div定位在哪,事情就变得简单了,但是我相信你在查询上面部分div时又发现,官方没有给它们绑定任何的类名或id。所以我们找到它们的父级标签使用序选择器。
我们可以隐藏四个边角

/* 隐藏四个边角 */</
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值