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

您所在的位置:网站首页 二十五史读后感800字 百度地图InfoWindow信息窗口的自定义和样式修改

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

2024-02-26 05:41| 来源: 网络整理| 查看: 265

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

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

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

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

/* 隐藏四个边角 */ .BMap_pop div:nth-child(1) { display:none; } .BMap_pop div:nth-child(3) { display:none; } .BMap_pop div:nth-child(5) { display:none; } .BMap_pop div:nth-child(7) { display:none; }

Ps:在修改有些部分样式时,你需要加上!important(懂得自然懂) 这里贴出为数不多的在原样式上修改的博文:百度地图 BMap InfoWindow修改默认样式 Css

2.重写一个自定义覆盖物

我们不使用百度地图提供的InfoWindow这个API,完全自己写html和css。这部分要求比较深的代码功底。因为整个信息窗口的布局需要自己构思,且还需要弹出的信息窗口和标注点相对应,其中难免会出现一些bug。 重写方法和样式就相当开放了,这里写一下我针对导师代码思路解析: 1. 一些bug上的注意点: 1)点击标注弹出信息窗口后不能自动移动,信息窗口的部分在地图外面导致有时会看不到。我用了panTo()来解决,但交互性还是不好。 2)当鼠标移动至信息窗口上时,如果信息窗口下面又有图标则又会触发图标的事件,就又会弹出一个信息窗口。 这里贴出针对自定义覆盖物的博文: 官方文档自定义覆盖物 百度地图API-自定义图标覆盖物 百度地图API如何给自定义覆盖物添加事件

对比

第一种方法在于简单方便,但修改样式来说会非常麻烦,有时也很难达到自己想要的样式。除此之外,它还会影响地图上其他原始坐标的样式。 第二种方法则需要大量的代码重写,需要注重的点非常多,如果要注重交互性需要很多的考虑。但自己随意发挥,可以达到UI样式的还原。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3