selectMapPos.vue
2.96 KB
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<template>
<div class="select-map-pos-container">
<div id="selectMap" class="map-view"></div>
<div class="map-hint">点击地图选择位置，经纬度将自动填充</div>
</div>
</template>
<script>
import { getCommunityId } from '@/api/community/communityApi'
export default {
name: 'SelectMapPos',
props: {
elementId: {
type: String,
default: 'selectMap'
},
initData: {
type: Object,
default: () => ({})
}
},
data() {
return {
map: null,
marker: null,
communityId: ''
}
},
mounted() {
this.communityId = getCommunityId()
},
methods: {
initMap(_data) {
let _lng = 116.397128
let _lat = 39.916527
if (_data.lng) _lng = _data.lng
if (_data.lat) _lat = _data.lat
if (this.map) {
this.map.destroy()
this.map = null
}
this.marker = null
const map = new window.AMap.Map('selectMap', {
center: [_lng, _lat],
zoom: 13,
resizeEnable: true
})
const _this = this
map.on('click', function (ev) {
const lng = ev.lnglat.getLng()
const lat = ev.lnglat.getLat()
_this.$emit('position-change', { lat, lng })
if (!_this.marker) {
_this.marker = new window.AMap.Marker({
position: [lng, lat],
map: map,
icon: new window.AMap.Icon({
size: new window.AMap.Size(25, 35),
imageSize: new window.AMap.Size(25, 35),
image: '/img/maper.png'
})
})
} else {
_this.marker.setPosition([lng, lat])
}
})
this.map = map
// 如果传入了已有坐标，在地图上显示标记
if (_data.lng && _data.lat) {
this.marker = new window.AMap.Marker({
map: this.map,
position: [_lng, _lat],
icon: new window.AMap.Icon({
size: new window.AMap.Size(25, 35),
imageSize: new window.AMap.Size(25, 35),
image: '/img/maper.png'
})
})
}
},
addMarker(position) {
if (this.marker) {
this.marker.setMap(null)
this.marker = null
}
this.marker = new window.AMap.Marker({
map: this.map,
position: position,
icon: new window.AMap.Icon({
size: new window.AMap.Size(25, 35),
imageSize: new window.AMap.Size(25, 35),
image: '/img/maper.png'
})
})
this.map.setCenter(position)
this.map.setZoom(16)
},
updatePosition(lat, lng) {
if (!this.map) return
this.addMarker([lng, lat])
}
},
beforeDestroy() {
if (this.map) {
this.map.destroy()
this.map = null
}
}
}
</script>
<style scoped>
.select-map-pos-container {
width: 100%;
}
.map-view {
width: 100%;
height: 400px;
border: 1px solid #dcdfe6;
border-radius: 4px;
}
.map-hint {
font-size: 12px;
color: #909399;
margin-top: 6px;
}
</style>