VUE&baidu-map 分类标注打点 +点击标注弹窗样式修改

效果图:

<template>

  <div>

    <baidu-map

      class="map"

      :center="map.center"

      :zoom="map.zoom"

      @ready="handler"

      :mapStyle="mapStyle"

      :style="{ height: clientHeight - 184 + 'px' }"

    >

      <!--缩放-->

      <bm-boundary

        name="南京市"

        :strokeWeight="2"

        fillOpacity="0.07"

        strokeColor="red"

      ></bm-boundary>

      <bm-marker

        v-for="(item, index) of makers"

        :key="index"

        :position="item.position"

        @click="lookDetail(index)"

        :icon="item.icon"

      >

        <bm-info-window

          class="wininfo"

          :position="item.position"

          :show="item.showFlag"

          @close="infoWindowClose(item)"

          @open="infoWindowOpen(item)"

          :autoPan="true"

        >

          <p class="title_name">

            {{ item.region }}

          </p>

          <div style="height: 10px"></div>

          <div class="content">

            <p>风险 : {{ item.risk }}</p>

            <p>信用 : {{ item.credit }}</p>

            <p>类别 : {{ item.type }}</p>

          </div>

        </bm-info-window>

      </bm-marker>

      <!--点-->

    </baidu-map>

    <div class="up-map-div">

      <Row type="flex" justify="center" class="code-row-bg">

        <Col span="4">

          <div

            class="tyoe"

            :class="{ active: cur_index == 1 }"

            @click="click(1)"

          >

            综合态势

          </div>

        </Col>

        <Col span="4"

          ><div

            class="tyoe"

            :class="{ active: cur_index == 2 }"

            @click="click(2)"

          >

            药品药械

          </div></Col

        >

        <Col span="4"

          ><div

            class="tyoe"

            :class="{ active: cur_index == 3 }"

            @click="click(3)"

          >

            特种设备

          </div></Col

        >

        <Col span="4"

          ><div

            class="tyoe"

            :class="{ active: cur_index == 5 }"

            @click="click(5)"

          >

            食品餐饮

          </div></Col

        >

      </Row>

      <br />

      <Row type="flex" justify="center" class="code-row-bg" margin-top="20px">

        <Col :span="2">

          <img src="./green.png" />

        </Col>

        <Col :span="4"> 低风险 </Col>

        <Col :span="2">

          <img src="./yellow.png" />

        </Col>

        <Col :span="4"> 中等风险 </Col>

        <Col :span="2">

          <img src="./red.png" />

        </Col>

        <Col :span="4"> 高风险 </Col>

      </Row>

    </div>

  </div>

</template>

<script>

import mapstyle from "./map.json";

export default {

  name: "demo",

  data: () => ({

    conheight: {

      height: "",

    },

    currentSearchParams: [],

    clientHeight: document.body.clientHeight,

    showmak: 1,

    cur_index: 1,

    mapStyle: {

      styleJson: mapstyle,

    },

    map: {

      center: { lng: 118.750659, lat: 32.06166 },

      zoom: 12,

      show: true,

      dragging: true,

    },

    makers: [

      {

        id: "2",

        name: "味事达(南京)食品有限公司",

        position: { lat: 31.936, lng: 118.835 },

        showFlag: false, //固定false

        icon: { url: require("./green.png"), size: { width: 40, height: 30 } }, //根据风险改变颜色 高风险red  中风险yellow 低风险 green 其他不变

        risk: "高风险", //风险程度

        credit: "良好", //信用情况

        type: "食品餐饮", //类型4种 :食品餐饮 企业主体 特种设备 药品药械     综合态势为这4个累加

      },

    ],

  }),

  methods: {

    handler({ BMap, map }) {

      let me = this;

      map.enableScrollWheelZoom(true);

      map.addEventListener("click", function (e) {});

    },

    lookDetail(index) {

      this.$set(this.makers[index], "showFlag", true);

    },

    infoWindowClose(item) {

      item.showFlag = false;

    },

    infoWindowOpen(item) {

      item.showFlag = true;

    },

    click(a) {

      this.cur_index = a;

      this.geData();

    },

    rewindow() {

      const that = this;

      window.onresize = () => {

        return (() => {

          window.screenHeight = document.body.clientHeight;

          that.clientHeight = window.screenHeight;

        })();

      };

    },

    async geData() {

      let type;

      switch (this.cur_index) {

        case 1:

          this.type = "";

          break;

        case 2:

          this.type = "药品药械";

          break;

        case 3:

          this.type = "特种设备";

          break;

        case 4:

          this.type = "企业主体";

          break;

        case 5:

          this.type = "食品";

          break;

      }

      this.currentSearchParams.type = this.type;

      await this.$http

        .get(`/api/databaseType/findRegionalQuality?type=${this.type}`, {})

        .then((res) => {

          if (res.data.code == 200) {

            const result = res.data.data;

            for (let i = 0; i < result.length; i++) {

              let color = "";

              if (result[i].risk == "高风险") {

                result[i].icon = {

                  url: require("./red.png"),

                  size: { width: 40, height: 30 },

                };

              } else if (result[i].risk == "中等风险") {

                result[i].icon = {

                  url: require("./yellow.png"),

                  size: { width: 40, height: 30 },

                };

              } else {

                result[i].icon = {

                  url: require("./green.png"),

                  size: { width: 40, height: 30 },

                };

              }

              // result[i].icon ={url: require('./ +color +.png'), size: {width: 40, height: 30}};

              result[i].showFlag = false;

              result[i].position = {

                lat: parseFloat(result[i].latitude),

                lng: parseFloat(result[i].longitude),

              };

            }

            // console.log(result);

            this.makers = result;

            // console.log( "makers",this.makers);

          } else {

            this.$Message.error({

              content: "获取数据失败!",

              duration: 2,

            });

          }

        })

        .catch((error) => {

          this.$Message.error({

            content: "获取数据失败!",

            duration: 2,

          });

        });

    },

  },

  watch: {

    clientHeight(val) {

      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器

      if (!this.timer) {

        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth

        this.clientHeight = val;

        this.timer = true;

        let that = this;

        setTimeout(function () {

          // 打印screenWidth变化的值

          //   console.log(that.clientHeight);

          that.timer = false;

        }, 400);

      }

    },

  },

  mounted() {

    this.rewindow();

    this.geData();

  },

};

</script>

<style lang="less" scoped>

.anchorBL {

  display: none;

}

.map {

  width: 100%;

}

.up-map-div {

  color: white;

  width: 460px;

  height: 100px;

  top: 70%;

  left: 70%;

  position: absolute;

  z-index: 9999;

  border: 1px solid rgb(157, 157, 221);

  background-color: #1a55918e;

  border-radius: 12px;

}

.tyoe {

  width: 70px;

  height: 40px;

  background: linear-gradient(360deg, #053f78 0%, rgba(21, 62, 159, 0) 100%);

  border-radius: 0px 0px 10px 10px;

  text-align: center;

  line-height: 40px;

  color: white;

  &.active {

    color: #4bb5cf;

    background: url("../../assets/risk-img/click.png") no-repeat;

  }

}

.title_name {

  font-size: 18px;

  color: #79c977;

}

.content {

  font-size: 14px;

  text-align: center;

  color: white;

}

</style>

<style lang="css">

.BMap_cpyCtrl {

  display: none;

}

.anchorBL {

  display: none;

}

.BMap_bottom + div div,

.BMap_bottom,

.BMap_center + div div,

.BMap_center,

.BMap_top + div div,

.BMap_top,

.BMap_pop div:nth-child(1) div {

  background-color: rgba(56, 68, 138, 0.589) !important;

}

.BMap_pop div img {

  height: 0px !important;

}

.BMap_bottom {

  z-index: 6 !important;

}

</style>