高德地图打点以及自定义弹窗

<template>
  <div class="s-main">
    <div id="mapContainer"></div>
    <left-bar v-if="statisticsData && findScore && findRisk" :leftBarData="statisticsData" class="left-bar"></left-bar>
    <div class="center">
      <div class="button-con">
        <div @click="fxHandler" class="fengxian" :class="active === 3 ? 'yinying' : ''">
          <span class="num num2">{{ statisticsData.riskTeamCount }}</span
          ><span class="txt">xxxx</span>
        </div>
        <div @click="zjHandler" class="zaijian" :class="active === 2 ? 'yinying' : ''">
          <span class="num">{{ statisticsData.constructionProjectCount }}</span
          ><span class="txt">xxxxxxx</span>
        </div>
        <div @click="qbHandler" class="quanbu" :class="active === 1 ? 'yinying' : ''">
          <span class="num">{{ statisticsData.allProjectCount }}</span
          ><span class="txt">xxxxx</span>
        </div>
      </div>
    </div>
    <rightBar v-if="statisticsData" :leftBarData="statisticsData" class="right-bar"></rightBar>
    <leftBottom v-if="findScore" :leftBarData="findScore" class="left-bottom"></leftBottom>
    <centertu v-if="statisticsData" :leftBarData="statisticsData" class="centertu"></centertu>
    <RightBottom v-if="findRisk" class="right-bottom" :leftBarData="findRisk"></RightBottom>
    <!-- 地图弹窗 -->
    <div ref="infoWindow" class="infoWindow">
      <div class="container" v-for="(item, index) in singleData" :key="index">
        <div class="map-item">
          <img class="map-icon" src="@/assets/images/statistics/map_2.png" alt="" srcset="" />
          <span>{{ item.projectName }}</span>
        </div>
        <div class="map-item map-item2">
          <img class="map-icon" src="@/assets/images/statistics/map_1.png" alt="" srcset="" />
          <span>{{ item.companyName }}</span>
        </div>
        <div class="projectCondition99" v-if="item.projectCondition == '99'">
          <span class="projectCondition99-name">{{ item.name }}</span
          ><span class="projectCondition99-clues">{{ item.clues }}</span>
        </div>
      </div>
    </div>
    <el-dialog title="企业信息" :visible.sync="dialog" width="1200px" append-to-body :close-on-click-modal="false">
      <transition name="fade">
        <company-detail v-if="dialog" :row="row">
          <el-button class="close" type="primary" @click="dialog = false" size="middle" style="margin-top:30px">关闭</el-button>
        </company-detail>
      </transition>
    </el-dialog>

    <el-dialog title="个人信息" :visible.sync="dialog2" width="1200px" append-to-body :close-on-click-modal="false">
      <transition name="fade">
        <labour-info :row="row" v-if="dialog2">
          <el-button class="close" type="primary" size="middle" @click="dialog2 = false">关闭</el-button>
        </labour-info>
      </transition>
    </el-dialog>
  </div>
</template>
<script>
import labourInfo from '../info/labourInfo.vue'
import companyDetail from '@/pages/company/companyDetail.vue'
import leftBar from './component/leftBar.vue'
import rightBar from './component/rightBar.vue'
import leftBottom from './component/leftBottom.vue'
import centertu from './component/centertu.vue'
import { tiantai } from './component/tiantai'
import RightBottom from './component/rightBottom.vue'
import { teamLeader } from '@/util/api'
export default {
  components: { labourInfo, companyDetail, leftBar, rightBar, leftBottom, centertu, RightBottom },
  data() {
    return {
      row: {},
      dialog: false,
      dialog2: false,
      map: {},
      tjArr: [],
      leftBarData: [1, 2, 3, 4],
      active: 1,
      statisticsData: null,
      findScore: null,
      findScoreNum: 0,
      findRisk: null,
      findRiskNum: 0,
      findAllProjectData: null,
      singleData: [],
      infoWindow: null,
      marker: null,
      markerArray: [],
      findRiskTeamData: null,
      extData2: 0,
      closeMarker: null,
    }
  },

  async created() {
    this.init()
    this.getFindScoreRecords()
    this.getFindRiskRecords()
  },

  async mounted() {
    await this.getFindAllProject()
    this.createMap()
    // eslint-disable-next-line no-undef
    this.addPolygon(tiantai)
  },
  methods: {
    closeView() {
      console.log('bbbb')
      this.infoWindow.close()
    },
    // GetCompanyProjectInfo: Project.GetCompanyProjectInfo,
    async qbHandler() {
      this.active = 1
      this.map.remove(this.markerArray)
      await this.getFindAllProject()
      this.addMarkers()
    },
    async zjHandler() {
      this.active = 2
      this.infoWindow.close()
      await this.getFindConstructionProject()
      this.map.remove(this.markerArray)
      this.addMarkers()
      // this.createMap()
    },
    async fxHandler() {
      this.active = 3
      this.infoWindow.close()
      await this.getFindRiskTeam()
      this.map.remove(this.markerArray)
      this.addMarkers()
    },
    async getFindAllProject() {
      console.log('mmmm')
      let res = await teamLeader.findAllProject()
      if (res) {
        this.findAllProjectData = res
      }
    },
    async getFindRiskTeam() {
      let res = await teamLeader.findRiskTeam()
      if (res) {
        this.findAllProjectData = res
      }
    },
    async getFindConstructionProject() {
      console.log('mmmm')
      let res = await teamLeader.findConstructionProject()
      if (res) {
        this.findAllProjectData = res
      }
    },
    async init() {
      let res = await teamLeader.getTianTaiStatistics({
        provinceCode: 330000,
        cityCode: 331000,
        countyCode: 331023,
      })
      if (res) {
        this.statisticsData = res
        this.tjArr = [res.teamLeaderCount, res.workerCount, this.findScoreNum, this.frDataNum]
        this.statisticsData.tjArr = this.tjArr
      }
      console.log(res)
    },
    // 用工信息反馈
    async getFindScoreRecords() {
      let fsData = await teamLeader.findScoreRecords(
        {
          provinceCode: 330000,
          cityCode: 331000,
          countyCode: 331023,
        },
        {
          PageIndex: 1,
          PageSize: 20,
        }
      )
      if (fsData) {
        console.log('fs', fsData)
        this.findScore = fsData
        this.findScoreNum = fsData.page?.total || 0
        this.tjArr[3] = this.findScoreNum
      }
    },
    // findRiskRecords班组风险
    async getFindRiskRecords() {
      let frData = await teamLeader.findRiskRecords(
        {
          provinceCode: 330000,
          cityCode: 331000,
          countyCode: 331023,
        },
        {
          PageIndex: 1,
          PageSize: 20,
        }
      )
      if (frData) {
        this.findRisk = frData
        this.findRiskNum = frData.page?.total || 0
        this.tjArr[2] = this.findRiskNum
        console.log('this.findRiskNum', this.findRiskNum, 'frData.page', frData.page)

        // this.statisticsData['tjArr'] = this.tjArr
      }
    },
    // 添加地图
    async createMap() {
      this.markerArray = []
      // const imgss = require('src/assets/images/statistics/map_icon_2.png')
      // eslint-disable-next-line no-undef
      this.map = new window.AMap['Map']('mapContainer', {
        zoom: 9.6, //设置地图的缩放级别
        zooms: [8, 20], //设置地图的缩放级别区间
        center: [120.9966, 28.97], //设置地图中心点坐标
        features: ['road', 'point'], //设置地图的底图元素，缺少则显示全部元素，bg区域面、point兴趣点、road道路及道路标注、building建筑物
      })
      this.map.on('click', this.closeView)
      // await this.getFindAllProject()
      this.addMarkers()
    },
    addMarkers() {
      this.findAllProjectData.map((item) => {
        let img = null,
          awidth = 30,
          aheight = 40
        this.infoWindow = new window.AMap.InfoWindow({
          isCustom: true, //使用自定义窗体
          content: this.$refs.infoWindow,
        })
        // item.cidF = '6666666667'
        if (item.projectCondition == '3') {
          img = require('@/assets/images/statistics/map_icon_2.png')
        } else if (item.projectCondition == '99') {
          img = require('@/assets/images/statistics/map_icon_3.png')
          awidth = 40
          aheight = 40
        } else {
          img = require('@/assets/images/statistics/map_icon_1.png')
        }
        let icon = new window.AMap.Icon({
          image: img, // Icon的图像
          size: new window.AMap.Size(awidth, aheight),
          imageSize: new window.AMap.Size(awidth, aheight), // 根据所设置的大小拉伸或压缩图片
        })
        this.marker = new window.AMap.Marker({
          position: [item.lng, item.lat],
          map: this.map,
          icon: icon,
          extData: item.pidF,
          offset: new window.AMap.Pixel(-12, -25),
        })
        this.markerArray.push(this.marker)
        this.marker.setMap(this.map)
        this.marker.setTitle(item.projectName)
        this.marker.on('click', (e) => {
          if (e.target._opts.extData === item.pidF) {
            this.singleData = []
            this.singleData.push(item)
            this.row = item
            this.extData2 = item.projectCondition
          }
          this.infoWindow.open(this.map, e.lnglat)
        })
        this.infoWindow.on('click', (e) => {
          // e.target.getExtData() === item.pidF
          console.log('e.target', e.target._opts.extData2)
          if (this.extData2 == '99') {
            this.dialog2 = true
          } else {
            this.dialog = true
          }
        })
        // this.marker.on('mouseout ', (e) => {
        //   console.log('eeee', e)
        //   this.infoWindow.close()
        // })
        this.map.add(this.marker)

        // this.marker.setMap(this.map)
      })
    },
    close() {
      this.dialog = false
    },
    addPolygon(data) {
      let that = this
      let polygon = new window.AMap.Polygon({
        path: data,
        fillColor: '#ccebc5',
        strokeOpacity: 1,
        fillOpacity: 0.5,
        strokeColor: '#2b8cbe',
        strokeWeight: 1,
        strokeStyle: 'dashed',
        strokeDasharray: [5, 5],
      })
      // polygon.on('mouseover', () => {
      //   polygon.setOptions({
      //     fillOpacity: 0.7,
      //     fillColor: '#7bccc4',
      //   })
      // })
      polygon.on('click', () => {
        this.infoWindow.close()

        // polygon.setOptions({
        //   fillOpacity: 0.5,
        //   fillColor: '#ccebc5',
        // })
      })
      that.map.add(polygon)
    },
  },
}
</script>
<style scoped lang="scss">
@import './component/var.scss';

// 滚动条隐藏
::-webkit-scrollbar-thumb {
  display: none;
}
.infoWindow {
  cursor: pointer;
  background: #fff;
  padding: 15px;
  font-size: 12px;
  .container {
    display: flex;
    flex-direction: column;
    .projectCondition99 {
      display: flex;
      margin-top: 10px;
      align-items: center;
      .projectCondition99-name {
        margin-left: 10px;
        font-weight: 600;
      }
      .projectCondition99-clues {
        padding: 4px;
        border: 1px solid #f8f3c5;
        color: #fee515;
        margin-left: 10px;
      }
    }
  }
  .map-item {
    display: flex;
    align-items: center;
  }
  .map-item2 {
    margin-top: 5px;
    color: #1d50ff;
  }
  .map-icon {
    display: flex;
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }
}
::v-deep .amap-logo {
  display: none !important;
}
::v-deep .amap-copyright {
  display: none !important;
}
.s-main {
  // font-family: 'PilcrowIconsMedium', sans-serif;
  font-size: 20px;
  padding: 0 !important;
  position: relative;
  overflow: scroll;
}
#mapContainer {
  width: 100%;
  height: 830px;
}

.left-bar {
  font-family: 'PilcrowIconsMedium', sans-serif;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  width: 420px;
  height: $top-height;
  background: $bgc_rgba;
}
.right-bar {
  border-radius: 10px;
  position: absolute;
  top: 0;
  right: 0;
  width: 420px;
  height: $top-height;
  background: $bgc_rgba;
}
.left-bottom {
  border-radius: 10px;
  background: $bgc_rgba;
  width: 420px;
  position: absolute;
  top: $top;
  left: 0;
  height: $height2;
  font-family: 'PingFangSC-Regular', 'Microsoft YaHei';
}
.center {
  border-radius: 10px;
  background: transparent;
  // width: calc(100% - 880px);
  position: absolute;
  top: 0;
  right: 450px;
  height: 70px;
  display: flex;
  justify-content: center;
  .button-con {
    flex-direction: column;
    width: 56px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    // font-family: 'PilcrowIconsMedium', sans-serif;
  }
  .quanbu,
  .zaijian,
  .fengxian {
    // border: 5px solid #fff;
    padding: 5px;
    cursor: pointer;
    width: 56px;
    height: 70px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 10px;
    box-shadow: 0px 3px 7px 0px rgba(117, 146, 189, 0.5);
  }
  .num {
    text-align: center;
    font-size: 20px;
    color: #1172ff;
  }
  .num2 {
    color: #ff692a;
  }
  .txt {
    margin-top: 1px;
    font-size: 12px;
  }
  .yinying {
    color: #fff !important;
    background-color: #1172ff;
    box-shadow: 0px 3px 3px 3px rgba(117, 146, 189, 0.9);
    .num,
    .num2,
    .txt {
      color: #fff;
    }
  }
}
.centertu {
  border-radius: 10px;
  background: $bgc_rgba;
  width: calc(100% - 880px);
  position: absolute;
  top: $top;
  left: 440px;
  height: $height2;
  font-family: 'PingFangSC-Regular', 'Microsoft YaHei';
}
.right-bottom {
  border-radius: 10px;
  background: $bgc_rgba;
  width: 420px;
  position: absolute;
  top: $top;
  right: 0;
  height: $height2;
  font-family: 'PingFangSC-Regular', 'Microsoft YaHei';
}
</style>

以上代码仅供参考