Vue中使用百度地图组件修改InfoBox样式

黑羊羊想做程序猿

已于 2022-07-22 09:24:01 修改

阅读量1.1k

点赞数

分类专栏：百度地图样式文章标签： vue.js 前端百度

于 2022-07-21 18:12:08 首次发布

本文链接：https://blog.csdn.net/weixin_46159066/article/details/125917570

版权

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