src/components/inspection/AInspectionRouteMap.vue

<template>
  <div id="aInspectionRouteMap" class="map-container"></div>
</template>
<script>
import { listAdminInspectionRoutePoints } from '@/api/inspection/aInspectionPlanDetailApi'
export default {
  name: 'AInspectionRouteMap',
  data() {
    return {
      map: null,
      points: [],
      markers: [],
      polyline: null
    }
  },
  methods: {
    async initMap(params) {
      try {
        const { data } = await listAdminInspectionRoutePoints({
          inspectionRouteId: params.inspectionRouteId,
          page: 1,
          row: 1000
        })
        this.points = data
        this.initMapView()
      } catch (error) {
        this.$message.error(this.$t('common.fetchError'))
      }
    },
    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('aInspectionRouteMap'), {
        center: center,
        zoom: 17,
        resizeEnable: true
      })
      const path = []
      this.points.forEach(point => {
        const marker = new window.AMap.Marker({
          map: this.map,
          position: [point.lng, point.lat],
          title: point.inspectionName,
          icon: new window.AMap.Icon({
            size: new window.AMap.Size(25, 35),
            imageSize: new window.AMap.Size(25, 35),
            image: '/img/maper.png'
          })
        })
        this.markers.push(marker)
        path.push([point.lng, point.lat])
      })
      if (path.length > 1) {
        this.polyline = new window.AMap.Polyline({
          map: this.map,
          path: path,
          strokeColor: '#3777FF',
          strokeWeight: 6,
          strokeOpacity: 0.8
        })
      }
    },
    clearMap() {
      this.markers.forEach(m => m.setMap(null))
      this.markers = []
      if (this.polyline) { this.polyline.setMap(null); this.polyline = null }
      if (this.map) {
        this.map.destroy()
        this.map = null
      }
    }
  },
  beforeDestroy() {
    this.clearMap()
  }
}
</script>
<style scoped>
.map-container {
  height: 600px;
  width: 100%;
}
</style>