master/src/components/inspection/AInspectionTaskMap.vue

<template>
  <div id="aInspectionTaskMap" class="map-container"></div>
</template>
<script>
import { queryAdminInspectionTaskDetail } from '@/api/inspection/adminInspectionTaskDetailApi'
export default {
  name: 'AInspectionTaskMap',
  data() {
    return {
      map: null,
      points: [],
      markers: []
    }
  },
  methods: {
    loadData(params) {
      console.log(params)
    },
    async initMap(params) {
      try {
        const { data } = await queryAdminInspectionTaskDetail({
          taskId: params.taskId,
          page: 1,
          row: 1000
        })
        this.points = data
        this.initMapView()
      } catch (error) {
        console.error(error)
        this.$message.error(error)
      }
    },
    initMapView() {
      if (!this.points || this.points.length === 0) return
      this.clearMap()
      const center = [this.points[0].lng, this.points[0].lat]
      this.map = new window.AMap.Map(document.getElementById('aInspectionTaskMap'), {
        center: center,
        zoom: 17,
        resizeEnable: true
      })
      this.points.forEach(point => {
        const isDone = point.state === '20200405'
        const icon = new window.AMap.Icon({
          size: new window.AMap.Size(25, 35),
          imageSize: new window.AMap.Size(25, 35),
          image: isDone ? '/img/inspection_done.png' : '/img/inspection.png'
        })
        const marker = new window.AMap.Marker({
          map: this.map,
          position: [point.lng, point.lat],
          title: point.inspectionName,
          icon: icon
        })
        this.markers.push(marker)
      })
    },
    clearMap() {
      this.markers.forEach(m => m.setMap(null))
      this.markers = []
      if (this.map) {
        this.map.destroy()
        this.map = null
      }
    }
  },
  beforeDestroy() {
    this.clearMap()
  }
}
</script>
<style scoped>
.map-container {
  height: 600px;
  width: 100%;
}
</style>