vue中使用vue-baidu-map 实现点 弹窗 路线 行政区划分

此文章只适合新手........

我这块主要是使用标签来进行使用，没有api操作灵活，但是也覆盖了大部分场景 ，只适合新手 只适合新手

<baidu-map
      style="position: absolute; height: 100%"
      class="bm-view"
      :scroll-wheel-zoom="true"
      :center="center"
      :zoom="zoom"
      :min-zoom="min_zoom"
      :max-zoom="max_zoom"
      :map-click="false"
      @ready="onBaiduMapReady"
    >
     // 右上角的切换按钮
      <bm-control class="kongjian">
        <button
          ref="kj1"
          style="color: #fff; background: #108ee9"
          @click="geticon('kj1', !isShow.firstIsShow, 'firstIsShow')"
        >
          <!-- style="color: #fff; background: #108ee9" -->
          数据
        </button>
        <button
          ref="kj2"
          @click="geticon('kj2', !isShow.secondIsShow, 'secondIsShow')"
        >
          商户
        </button>
        <button
          ref="kj3"
          @click="geticon('kj3', !isShow.thirdIsShow, 'thirdIsShow')"
        >
          车辆
        </button>
        <button
          ref="kj4"
          @click="geticon('kj4', !isShow.fourthIsShow, 'fourthIsShow')"
        >
          路线
        </button>
        <button
          ref="kj5"
          @click="geticon('kj5', !isShow.sixthIsShow, 'sixthIsShow')"
        >
          异常事件
        </button>
      </bm-control>
      <!-- 行政区 -->
     <!-- 行政区划分 使用这个bm-boundary name属性值为：‘西安市雁塔区’ 这种的文字就可以 -->
      <bm-boundary
        v-for="(item, index) in administrativeRegion"
        :key="index"
        :name="item.name"
        :strokeWeight="3"
        :strokeColor="item.color"
        :fillColor="item.color"
      >
      </bm-boundary>

      <!-- 文字层 -->
      <!-- 地图上的长显示文字 -->
      <bm-overlay
        pane="labelPane"
        :class="{ sample: true, active }"
        v-for="item in areaDivideName"
        :position="{ lng: item.lng, lat: item.lat }"
        :key="item.lng"
        @draw="draw($event, item)"
        @mouseover.native="active = true"
        @mouseleave.native="active = false"
      >
        <div>
          <p>{{ item.newName }}</p>
          <p>{{ item.discharge }}</p>
        </div>
      </bm-overlay>

      <!-- 点的聚合效果 -->
      <bml-marker-clusterer :averageCenter="false">
<!-- 点 -->
        <bm-marker
          v-for="(item, index) in shoppingNameOne"
          :key="item.id + '' + index"
          :position="{ lng: item.lng, lat: item.lat }"
          :icon="item.path"
          @click="infoWindowOpen(item)"
        >
        </bm-marker>
      </bml-marker-clusterer>

      <bm-marker
        v-for="(item, index) in shoppingNameTwo"
        :key="item.id + '' + index"
        :position="{ lng: item.lng, lat: item.lat }"
        :icon="item.path"
        @click="infoWindowOpenCar(item)"
      >
      </bm-marker>
      <bm-marker
        v-for="(item, index) in shoppingNameThree"
        :key="item.id + '' + index"
        :position="{ lng: item.lng, lat: item.lat }"
        :icon="item.path"
        @click="infoWindowOpenBnormal(item)"
      >
      </bm-marker>

      <bm-info-window
        :show="!bmMmarkerShow"
        :position="{ lng: infoWindowOpenObj.lng, lat: infoWindowOpenObj.lat }"
        @close="infoWindowClose"
      >
        <p class="customerName">
          <span>商户名：</span>{{ infoWindowOpenObj.customerName }}
        </p>
        <p class="customerName">
          <span>收运状态：</span
          >{{ infoWindowOpenObj.status == 0 ? "未收运" : "已收运" }}
        </p>
        <p class="customerName">
          <span>今日收运量：</span>{{ infoWindowOpenObj.discharge }}
        </p>
      </bm-info-window>

      <bm-info-window
        :show="!bmCarShow"
        :position="{ lng: infoWindowOpenCarObj.lng, lat: infoWindowOpenCarObj.lat }"
        @close="infoWindowCloseCar"
      >
        <p class="customerName">
          <span>车辆名：</span>{{ infoWindowOpenCarObj.vehicleName }}
        </p>
        <p class="customerName">
          <span>工作状态：</span
          >{{ infoWindowOpenCarObj.status == 0 ? "空闲" : "工作" }}
        </p>
        <p class="customerName">
          <span>定位时间：</span>{{ infoWindowOpenCarObj.createDate }}
        </p>
      </bm-info-window>
<!--点击点显示的弹框 -->
       <bm-info-window
        :show="!bmaBnormalShow"
        :position="{ lng: infoWindowOpenaBnormalObj.lng, lat: infoWindowOpenaBnormalObj.lat }"
        @close="infoWindowCloseBnormal"
      >
        <p class="customerName">
          <span>车辆名：</span>{{ infoWindowOpenaBnormalObj.vehicleName }}
        </p>
        <p class="customerName">
          <span>报警状态：</span
          >{{ infoWindowOpenaBnormalObj.status == 1 ? "报警" : "已处理" }}
        </p>
        <p class="customerName">
          <span>时间：</span>{{ infoWindowOpenaBnormalObj.createDate }}
        </p>
      </bm-info-window>
      <!--路线标签 需要路线数组可以自己生成一条线-->
      <bm-polyline
        :path="routeList"
        stroke-color="blue"
        :stroke-opacity="1"
        :stroke-weight="2"
      >
      </bm-polyline>
      
    </baidu-map>

主标签的基本信息配置   其他数据都是业务数据我这块就不显示了 都是数组格式，如果实在不知道数据格式可以去官网看看

baidumap: {
    center: { lng: 108.944, lat: 34.335 },
    address: '西安',
    zoom: 1,
    location: '西安',
    min_zoom: 11,
    max_zoom: 18,
  },

 常显示文字样式 bm-overlay样式

.sample {
  width: 120px;
  // height: 40px;
  line-height: 40px;
  // background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  // box-shadow: 0 0 5px #000;
  color: #000;
  text-align: center;
  padding: 10px;
  position: absolute;
}

.sample.active {
  color: #000;
}

.sample div {
  box-sizing: border-box;
  display: flex;
  // justify-content: space-around;
  background: rgb(238, 238, 179);
  border: 2px solid #679af4;
  border-radius: 20px;
  width: 110px;
  height: 26px;

  color: #333;

  & > p {
    text-align: center;
    height: 23px;
    line-height: 23px;
  }

  & > p:nth-child(1) {
    width: 55%;
    color: #fff;
    background: #679af4;
    border-radius: 20px;
  }

  & > p:nth-child(2) {
    width: 45%;
    text-align: center;
  }

  // width: 100%;
  // height: 50%;
  // margin: 0 auto;
  // text-align: center;
}