Google Map 和 Bootstrap 冲突的地方

今天遇到一个诡异的问题(其实以前就遇到了,被我想办法绕开了):

在Google Map里添加一个Marker,如果Marker能够被拖动(draggable),就显示不正常。表现为一个1/3宽度的图标带2个阴影,拖动后变成1/4大小的图标。

反复尝试都无法解决,去查看了Gmap的源码,发现大家是一样的,也没能解决。最后还是Google之!

原来是Bootstrap的问题,它为了不让图片撑开容器,在样式里规定img { max-width: 100%};,就是这句话导致图片被压缩(应该是默认占据更宽的位置,好显示阴影之类的东西)。

修改我的样式,增加.map-container img { max-width: none; }之后,就一切正常了。

发布者:meathill

爱编程,爱旅游,爱吐槽。 今年的目标是完成并运营至少一个 Side Project。 《Electron + Vue 实战开发》龟速创作中……

加入对话

1条评论

留下评论

欢迎吐槽,请勿装死

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

%d 博主赞过: