百度地图信息窗体框背景样式修改（标记点与海量点弹信息框）

直接在style样式中加入你就可以看到信息窗体框会生效 

 

/deep/.BMap_pop img,
    /deep/.BMap_top,
    /deep/.BMap_center,
    /deep/.BMap_bottom,
    /deep/.BMap_pop > div {
      &:not(:nth-child(9)) {
        display: none;
      }
    }
 
    /deep/.BMap_pop div:nth-child(9) {
      top: 30px !important;
    }
    /deep/.BMap_bubble_content {
      border-top: 3px solid #377abd;
      border-bottom: 3px solid #377abd;
      border-radius: 8px;
      background-color: rgba(36, 105, 137, 0.8);
      overflow: hidden;
      color: #ffffff;
      padding: 8px 5px;
      font-size: 14;
    }

例如（拿走不谢）：写的我心态都崩了

<template>
  <!-- :scroll-wheel-zoom="true"  开启滚轮缩放 -->
  <!-- :center="{ lng: 116.404, lat: 39.915 }"  设置中心点经纬度 -->
  <!-- :zoom="15"  缩放等级 -->
  <!-- mapType="BMAP_SATELLITE_MAP"  地图类型  例如卫星图 -->
  <!-- :mapStyle="mapStyle"   地图背景 -->
  <div class="map">
    <baidu-map
      class="baiDuMap"
      :center="location"
      :zoom="zoom"
      style="height: 500px; width: 100%"
      :scroll-wheel-zoom="true"
      @ready="mapReady"
    >
      <!-- bm-marker 就是标注点 定位在point的经纬度上 跳动的动画 -->
      <bm-marker :position="center" @click="checkDetail"> </bm-marker>

      <!-- 信息框 -->
      <bm-info-window
        class="info"
        :title="showTitle"
        :show="showFlag"
        :position="center"
      >
        <div class="window">
          <div class="container">
            <div>119案件编号:dsajvgewjp9272</div>
            <div>警情类型:火灾扑救/建筑堆场类</div>
            <div>报警时间:2020年7月20日 15:35:20</div>
            <div>警情地址:四季青镇京泉欣院小区19号</div>
          </div>
          <div class="input">
            <span>经度:</span
            ><el-input v-model="center.lng" placeholder="请输入内容"></el-input>
            <span>纬度:</span
            ><el-input v-model="center.lat" placeholder="请输入内容"></el-input>
          </div>
        </div>
      </bm-info-window>

      <!-- 页面打点显示 -->
      <bm-point-collection
        :points="points"
        shape="BMAP_POINT_SHAPE_STAR"
        color="red"
        size="BMAP_POINT_SIZE_BIG"
        @click="clickHandler"
      >
      </bm-point-collection>
    </baidu-map>
    <div id="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      location: { lng: 116.403963, lat: 39.915119 },
      zoom: 19,
      center: {
        lng: 116.403963,
        lat: 39.915119,
      },
      position: {
        lng: 116.403963,
        lat: 39.915119,
      },
      showTitle: '',
      showFlag: false,
      mapStyle: {
        
      },

      //添加大量点
      points: [],
    }
  },

  methods: {
    checkDetail() {
      this.showFlag = false
      this.showFlag = !this.showFlag
    },

    clickHandler(e) {
      console.log(e)
      this.showFlag = false
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
      this.showFlag = true
      // alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`)
    },
    //添加海量点
    addPoints() {
      const points = []
      for (var i = 0; i < 10000; i++) {
        const position = {
          lng: Math.random() * 50 + 115,
          lat: Math.random() * 50 + 38,
        }
        points.push(position)
      }
      this.points = points
    },

    //渲染地图样式
    mapReady({ BMap, map }) {
      console.log(BMap, map)
      map.setMapStyle(
        // {styleId:'8eb40484b1d9eb19b5198b599018ebb4'}
        { style: 'midnight' }
      )
    },

    inited() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('chart'))

      var option = {
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' },
            ],
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
  },
  mounted() {
    this.inited()
    this.addPoints()
  },
}
</script>

<style lang="less" scoped>
.map {
  #chart {
    // position: relative;
    height: 200px;
    width: 200px;
    // z-index: 999;
  }
  .baiDuMap {
    // position: relative;
    // z-index:1;
    .window {
      margin: 10px 10px;
      .container {
        color: skyblue;
        font-size: 14px;
        font-weight: 700;
      }
      .input {
        display: flex;
        width: 300px;
        /deep/.el-input {
          .el-input__inner {
            height: 20px;
            line-height: 20px;
            width: 95%;
            color: skyblue;
            font-weight: 500;
            background-color: rgba(198, 233, 247);
          }
        }
        span {
          width: 100px;
          color: skyblue;
          font-weight: 700;
          font-size: 14px;
          height: 20px;
          line-height: 20px;
        }
      }
    }

    //信息窗口样式
    /deep/.BMap_pop img,
    /deep/.BMap_top,
    /deep/.BMap_center,
    /deep/.BMap_bottom,
    /deep/.BMap_pop > div {
      &:not(:nth-child(9)) {
        display: none;
      }
    }

    /deep/.BMap_pop div:nth-child(9) {
      top: 30px !important;
    }
    /deep/.BMap_bubble_content {
      // border-top: 3px solid #377abd;
      border-top: 3px solid rgba(44, 55, 47, 0.3);
      // border-bottom: 3px solid #377abd;
      border-bottom: 3px solid rgba(44, 55, 47, 0.3);
      border-radius: 8px;
      // background-color: rgba(36, 105, 137, 0.8);
      background-color: rgba(44, 55, 47, 0.4);
      overflow: hidden;
      color: #ffffff;
      padding: 8px 5px;
      font-size: 14;
    }
  }
}
</style>