百度地图 vue-map 根据状态定位多个

<!--
 * @Author: zhang_gen_yuan
 * @Date: 2020-12-23 17:35:15
 * @LastEditTime: 2020-12-26 14:26:51
-->
<template>
  <div class="baidu_map">
    <baidu-map
      class="map"
      :center="position"
      :zoom="11"
      :scroll-wheel-zoom="true"
      id="map"
      @ready="readyHandle"
    >
      <template>
        <div>
          <bm-marker
            v-for="item in areaData"
            :key="item.code"
            :position="{ lng: item.site.lng, lat: item.site.lat }"
            :icon="{
              url: setIcon(item.status),
              size: { width: 32, height: 35 },
            }"
            @click="mapInfroWindowHandle(item, $event)"
            :offset="{ width: 0, height: 0 }"
          ></bm-marker>
        </div>
      </template>
      <bm-info-window
        :position="infoPosition"
        :show="infoWindow.show"
        class="info_window_box"
      >
        <div class="info_window">
          <div class="info_window_one">
            <div>
              <span>设备编号: </span>
              <span>123465789</span>
            </div>
            <div @click="jumpDetails">查看更多>></div>
          </div>
          <div>
            <span>安装地点: </span>
            <span class="address">河南省郑州市中原区国家大学科技园Y6栋三楼扁担信息科技有限公司</span>
          </div>
          <div>
            <span>作业时长: </span>
            <span>1.5h</span>
          </div>
          <div>
            <span>负责人: </span>
            <span>刘德华</span>
          </div>
          <div>
            <span>设备状态: </span>
            <span style="color:green;">正常</span>
          </div>
          <div>
            <img
              src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2969077830,2891440464&fm=26&gp=0.jpg"
              style="width: 100%; height: 100px"
              alt=""
            />
          </div>
        </div>
      </bm-info-window>
    </baidu-map>
    <ul class="state_icon">
      <li><i class="blue_icon"></i>正常</li>
      <li><i class="red_icon"></i>禁用</li>
      <li><i class="pink_icon"></i>告警</li>
      <li><i class="gray_icon"></i>离线</li>
    </ul>
    <div class="search_bar">
          <div class="search_info" style="display: flex">
            <span>
              <el-select
                v-model="searchObj.type"
                placeholder="请选择设备类型"
                clearable
              >
                <el-option
                  v-for="item in options"
                  :key="item.key"
                  :label="item.name"
                  :value="item.key"
                ></el-option>
              </el-select>
            </span>
            <span style="margin: 0 20px">
              <el-input
                v-model="searchObj.firmName"
                placeholder="请输入设备编号"
                clearable
              ></el-input>
            </span>
            <span>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="searchProject"
                >搜索</el-button
              >
            </span>
          </div>
          <div class="info">
            <div><span>接入企业数量:</span> <span class="info_number">100</span><span>家</span></div>
            <div><span>在线企业数量:</span> <span class="info_number">100</span><span>家</span></div>
            <div><span>接入设备数量:</span> <span class="info_number">100</span><span>台</span></div>
            <div><span>在线设备数量:</span> <span class="info_number">100</span><span>台</span></div>
            <div><span>离线设备数量:</span> <span class="info_number">100</span><span>台</span></div>
          </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      areaData: [],
      position: "北京市",
      show: true,
      infoWindow: {
        show: false,
      },
      infoPosition: {
        lng: "",
        lat: "",
      },
      options: [],
      code: "",
      searchObj: {
        firmName: "",
        type: "",
      },
    };
  },
  computed: {},
  methods: {
    jumpDetails() {
      alert("跳转到详情");
    },
    readyHandle({ BMap, map }) {
      console.log(BMap, map);
      this.searchProject();
    },
    getMapRegions() {
      let that = this;
      let obj = {};
      that.$api.home
        .getMapRegions(obj)
        .then((res) => {
          if (res.code == 200) {
            that.areaData = res.data;
          }
        })
        .catch((err) => {
          that.$message.error(err.message || "获取区域失败");
        });
    },
    searchProject() {
      this.getMapRegions();
    },
    setIcon(state) {
      let iconUrl = "";
      switch (state) {
        case 0:
          iconUrl = require("../../assets/home_map/gray.png");
          break;
        case 1:
          iconUrl = require("../../assets/home_map/green.png");
          break;
        case 2:
          iconUrl = require("../../assets/home_map/red.png");
          break;
        case 3:
          iconUrl = require("../../assets/home_map/yellow.png");
      }
      return iconUrl;
    },
    mapInfroWindowHandle(item, ev) {
      console.log(item);
      this.infoWindow.show = true;
      this.infoPosition.lng = ev.point.lng;
      this.infoPosition.lat = ev.point.lat;
    },
  },
  created() {
    this.position = "郑州市";
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.baidu_map {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  font-size: 14px;
  .map {
    width: 100%;
    height: 100%;
  }
  /deep/.BMap_bubble_content {
    background: #f9f9f9;
  }
  .search_bar {
    position: absolute;
    top: 10px;
    left: 20px;
    display: flex;
    .info{
      display: flex;
      background: #fff;
      padding: 10px 20px;
      margin: 0 50px;
      div{
        margin: 0 10px;
        .info_number{
          color:#f1bf00;
          font-size: 18px;
          margin: 0 3px;
        }
      }
    }
  }
  .state_icon {
    position: absolute;
    display: flex;
    right: 30px;
    top: 70px;
    width: 120px;
    background-color: rgba(255, 255, 255, 0.9);
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 0;
    li {
      width: 100%;
      line-height: 30px;
      font-size: 14px;
      text-align: center;
      color: #000;
      i {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        margin-right: 18px;
        vertical-align: middle;
        margin-top: -2px;
      }
      i.blue_icon {
        background-color: #00e931;
      }
      i.red_icon {
        background-color: #ff2600;
      }
      i.gray_icon {
        background-color: gray;
      }
      i.pink_icon {
        background-color: #ff9900;
      }
    }
  }
  .info_window_box {
    font-size: 14px;
    width: 250px;
    padding: 10px;
    .info_window {
      width: 100%;
      div {
        padding: 5px 0;
      }
      .info_window_one {
        width: 100%;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        .address{
          font-size: 12px;
        }
      }
      .info_window_one div:nth-child(2) {
        color: #f1bf00;
      }
    }
  }
}
</style>