Vue中使用百度地图组件修改InfoBox样式
哈喽大家好,今天黑洋洋在开发一个系统中,遇到了修改百度地图InfoBox样式的问题,弄了半天,才解决,现在就来讲一下是咋回事,废话不多说,上代码!!如果大家想要学习具体内容可以到官网https://dafrok.github.io/vue-baidu-map/#/zh/control/control(这个是Vue Baidu Map的网址)
效果图
代码展示
文件介绍
首先我的文件分为了两个,我的组件展示在了homepage.vue文件中,然后我还有另外一个文件叫map.vue。homepage是我的系统首页,里面除了地图组件还有首页其他内容,map.vue文件中引入了百度地图组件$ npm install vue-baidu-map --save(需要先下载一下组件,参考上面我说的Vue Baidu Map的网址,看看咋下载)。map.vue文件中还进行了对infowindow内容的设置操作。
样式修改
修改info window样式的时候,我们到页面中检查一下,看一下盒子的组成。盒子是由9个div组成,有些盒子没有id或者class就要用nth-of-type或者nth-child选择进行样式修改。接下来的重点是!!!!样式修改到底写在哪个文件???我一开始写在了map.vue中,弄了一个下午都实现不了,然后第二天一早,突然想起来应该在homepage试一下(但是我现在都没太懂为啥要写在homepage里才行),果然可以。
.BMap_bubble_title {
color: #fff;
font-size: 16px;
font-weight: bold;
text-align: left;
background: transparent !important;
}
.BMap_pop{
width: 192px !important;
}
.BMap_bubble_content p{
font-size: 16px !important;
}
.BMap_pop .BMap_top {
background: rgba(0, 0, 0, .8) !important;
border: 0 !important;
width: 212px !important;
}
.BMap_pop .BMap_center {
width: 261px !important;
border: 0 !important;
background: rgba(0, 0, 0, .8) !important;
}
.BMap_pop .BMap_bottom {
border: 0 !important;
background