强迫症诱因
2017年初接触百度地图开放平台,当时使用百度地图的Javascript API写了一个简单的程序,完工投用后发现有一个强迫症患者完全不能接受的情况发生了,如下图:
看见了吗?就是它~就是它!!
当鼠标移动到百度地图的兴趣点上时,本来应该正常显示的title内容直接就没有那个框框了,那个框框缩到那么一点点了,而其他的都正常,包括自定义的marker的title都能显示正常。
后续因为本职工作太忙了,一直拖着没弄,可不弄好它,一直都有病啊~~
有病要吃药
2019年了,眼看就要过春节了,不想再拖了,开始想办法处理它。
可丢了一年了,全网到处搜均未找到答案,没办法,自己动手。
刚开始完全没头绪,只有一步一步来,打开chrome→按F12→刷新,从百度读取的js和css一个一个的看,完全找不到门
N次测试后病情更重了!!
找到药了
没办法,偷不了懒了,只有一个一个的试
因为这个title属于css控制的东西,那就先将自己后续加载的css全部屏蔽掉,然后一个一个的加载,看到底是哪个造成的
很快,发现因为程序里加载了Bootstrap.js和对应的css,屏蔽掉css就能恢复正常显示,找到问题文件就好办了,马上动手一个一个class的注释掉,最后发现,百度地图API兴趣点的title显示是使用的label标签实现的,而Bootstrap.css里边对label标签有一行:max-width: 100%;←就是它~搞鬼!原码如下:
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold
}
改成:
label {
display: inline-block;
/* max-width: 100%; */
margin-bottom: 5px;
font-weight: bold
}
即可!!!!!!!!!!!!
不过,这样改了很可能导致程序里其他使用了这个标签的地方出现异样,但是,那都不是事儿!!!
病好了
病去如抽丝!!!全身舒泰了!!