百度地图InfoWindow信息窗口的自定义和样式修改 |
您所在的位置:网站首页 › 二十五史读后感800字 › 百度地图InfoWindow信息窗口的自定义和样式修改 |
最近捣腾百度地图,在做标志物点击事件显示信息窗口时,发现官方的信息窗口只给了固定的样式,且比较普通。那么该如何想修改成自己想要的样式? 1.在官方给出的原基础上进行修改了解这种方法有助于你理解官方的信息窗口结构。这里我拿官方示例来进行举例:纯文字信息窗口 1.我们平时想要修改js生成的样式或者不是自己写的的样式时,需要找到其类名或者id名,然后在全局样式下进行修改。 2.所以我们直接打开控制台,解析结构,重点来了:发现官方的信息窗口内部是由9个div组成的,具体按照顺序分布情况是上面三个(左上、中间、右上(包括那个叉。。)),中间一个横向的div,下面三个(左下、中间、右下),第8个是最下面那个角,第九个又回到中间是个小的div。文字描述有些抽象,多在实例上看一看就熟悉了。 这里放出左上div 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 |