MarketingMap.vue

<template>
  <div>
    <title-bar title="营销认领" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>

    <!-- 百度地图-->
    <baidu-map class="bm-view" ak="FP7zWR4e8lhxZ6v0IicoG1R5" :center="{ lng: 104.080998, lat: 30.595462 }" :zoom="13" @ready="mapReady">
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>

      <bm-marker v-for="(item, index) in customerList" :key="index" :position="positions[item.clientid] || upoint" @click="open(item, index)">
        <bm-info-window class="details-popup" :title="strtitle" :show="showIndex == index" @close="close">
          <div class="pop-ups-content">
            <span>地址：</span>
            {{ item.address }}
          </div>
          <div class="operate">
            <button @click="close">取消</button>
            <button>认领</button>
          </div>
        </bm-info-window>
      </bm-marker>
    </baidu-map>
    <div class="marketing-leads">
      <div>营销线索共计120条</div>
      <div>已认领129条线索</div>
    </div>
    <div @click="marketingList" class="marketing-list">
      <div>
        <div>·——</div>
        <div>·——</div>
        <div>·——</div>
        <div>&nbsp;列表</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import { BaiduMap, BmScale, BmNavigation, BmInfoWindow, BmPointCollection, BmMarker } from "vue-baidu-map";
/**
 * @Description 营销认领地图
 * @Author JiangTao
 * @Date 2021-10-23 下午 06:51
 */
@Component({
  name: "MarketingMap",
  components: {
    TitleBar,
    BaiduMap,
    BmScale,
    BmNavigation,
    BmInfoWindow,
    BmPointCollection,
    BmMarker,
  },
})
export default class MarketingMap extends Vue {
  pageTitle = ""; // 页面标题
  showIndex = -1;
  BMapGL: any = {};
  map: any = {};
  positions: any = {};
  upoint: any = { lng: 104.080998, lat: 30.595452 };
  infoTitle = "";
  url = require("../../../assets/svg/title.svg");
  customerList: any = [
    { clientid: 1, username: "李寻欢", company: "六一科技有限公司", tel: "18688888888", address: "成都市双流区" },
    { clientid: 2, username: "孙小红", company: "五一科技有限公司", tel: "18688888887", address: "成都市武侯区" },
    { clientid: 3, username: "阿飞", company: "十一科技有限公司", tel: "18688888886", address: "成都市锦江区" },
  ];
  onClick() {
    console.log(111111);
  }
  mounted() {
    this.pageTitle = this.$route.meta?.name;
  }
  marketingList() {
    this.$router.replace({
      path: "/main/marketing-mgt",
    });
  }
  //百度地图
  mapReady(bmap: any) {
    this.BMapGL = bmap.BMap;
    this.map = bmap.map;
    const myGeo = new this.BMapGL.Geocoder();
    // 将地址解析结果显示在地图上，并调整地图视野
    for (let i = 0; i < this.customerList.length; i++) {
      myGeo.getPoint(this.customerList[i].address, (point: any) => {
        const positions: any = this.positions;
        positions[this.customerList[i].clientid] = point;
        this.positions = positions;
        console.log(this.positions);
        this.$forceUpdate();
      });
    }
  }
  close() {
    this.showIndex = -1;
  }
  open(item: any, index: number) {
    this.showIndex = index;
    this.infoTitle = item.company;
    console.log(item);
  }
  //弹出窗口标题
  get strtitle() {
    return `<div style="border-bottom: 1px solid #999999;padding-bottom: 3%;margin-bottom: 3%"><div style="width: 24px;height: 24px;background-color: #33A3DE;border-radius: 12px;float: left;margin-right: 10px;"><img src="${this.url}" style="width: 14px;height: 12px;margin-left: 5px;" alt=""></div>${this.infoTitle}</div>`;
  }
}
</script>

<style scoped>
.bm-view {
  float: left;
  width: 100%;
  height: calc(100vh - 60px);
}
.marketing-leads {
  position: absolute;
  width: 94%;
  margin-top: 2%;
  margin-left: 3%;
  border: 1px solid #c2c2c2;
  background-color: white;
}
.marketing-leads > div:nth-child(1) {
  font-size: 115%;
  color: #333333;
  font-family: "Arial Normal";
  float: left;
  margin: 1.6% 0;
  margin-left: 3%;
}
.marketing-leads > div:nth-child(2) {
  font-size: 115%;
  color: #f59a23;
  font-family: "Arial Normal";
  float: right;
  line-height: 410%;
  margin-right: 3%;
}
.marketing-list {
  position: absolute;
  width: 7%;
  height: 15%;
  right: 50px;
  top: 250px;
  background-image: url("../../../assets/svg/red-spheric.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}
.marketing-list div {
  margin-top: 20%;
  margin-left: 15%;
}
.marketing-list div div {
  margin-top: -9%;
  font-weight: bold;
  color: white;
}
.pop-ups-content {
  width: 440px;
  height: 60px;
  padding-left: 2%;
  padding-right: 2%;
  align-content: space-between;
}
.operate {
  width: 100%;
  height: 31px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.operate button {
  width: 26.5%;
  height: 30px;
  margin-right: 1%;
  margin-left: 1%;
  border-radius: 20px;
}
.operate > button:nth-child(1) {
  border: 1px solid rgba(215, 215, 215, 1);
  background-color: white;
  color: #999999;
}
.operate > button:nth-child(2) {
  border: 1px solid #fd5065;
  background-color: #fd5065;
  color: white;
}
</style>