<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>
vue2 使用高德地图
于 2022-07-29 10:53:29 首次发布