vue2 使用高德地图_vue2 高德地图

<template>
  <div class="map" id="container"></div>
</template>

<script>
import { getStation } from '@/api/photovoltaic'

export default {
  name: 'MapContainer',

  data() {
    return {
      map: null,
      mapMarker: {
        station: [],
        stationIsShow: true
      },

      kanbanData: {
        userInfo: []
      }
    }
  },
  watch: {
    map(val) {
      console.log('地图变更了')
      // 因为生命周期，所以存在数据
      let stations = this.kanbanData.stationList ? this.kanbanData.stationList : []
      stations.forEach(item => {
        this.addStationMarker(item.station_long, item.station_lat, item.station_name)
      })
    }
  },
  created() {
    // 看板01基础数据
    this.getKanban01Info()
  },
  mounted() {
    // 初始化地图，遮盖物地图
    this.$nextTick(_ => {
      this.mapInit()
    })
  },
  // 销毁地图
  beforeDestroy() {
    if (!this.map) {
      return
    }
    this.map.destroy()
    this.map = null
  },
  methods: {
    // 初始化地图
    mapInit() {
      let opts = {
        subdistrict: 0,
        extensions: 'all',
        level: 'city'
      }
      let district = new AMap.DistrictSearch(opts)
      district.search('徐州市', (status, result) => {
        let bounds = result.districtList[0].boundaries
        let mask = []
        for (let i = 0; i < bounds.length; i += 1) {
          mask.push([bounds[i]])
        }

        // 设置描点地图风格
        this.map = new AMap.Map('container', {
          mask: mask,
          viewMode: '3D',
          labelzIndex: 130,
          pitch: 30,
          zoom: 10,
          mapStyle: 'amap://styles/85a13bb7917149ce448e878f'
        })

        //添加描边
        for (let i = 0; i < bounds.length; i += 1) {
          new AMap.Polyline({
            path: bounds[i],
            strokeColor: '#ffffff',
            strokeWeight: 4,
            map: this.map
          })
        }
      })
    },

    //地图添加marker
    addStationMarker(station_long, station_lat, station_name) {
      let marker = new AMap.Marker({
        icon: require('../../../assets/img/kanban/icon.png'), // 自定义点标记
        position: [station_long, station_lat], // 基点位置
        offset: new AMap.Pixel(0, 0), // 设置点标记偏移量
        anchor: 'bottom-center', // 设置锚点方位
        title: station_name
      })

      this.mapMarker.station.push(marker)
      this.map.add(marker)
    },

    // 地图左下角标记
    markerListClick(markers, isShow) {
      if (isShow) {
        this.map.add(markers)
      } else {
        this.map.remove(markers)
      }
    },
    // 看板01基础数据
    getKanban01Info() {
      getStation({
        user_id: this.$store.getters.user_id
      }).then(res => {
        this.kanbanData = {
          ...this.kanbanData,
          ...res
        }
      })
    }
  }

}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126