selectMapPos.vue
3.12 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
143
144
145
146
147
148
149
<template>
<div class="select-map-pos-container">
<div :id="elementId" style="width: 100%; height: 100%;"></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()
this.$nextTick(() => {
this.initMap(this.initData)
})
},
methods: {
initMap(data) {
// 清除现有地图
if (this.map) {
this.map.destroy()
this.map = null
this.marker = null
}
// 设置默认中心点
let center = new TMap.LatLng(39.916527, 116.397128)
let zoom = 13
// 如果有初始数据，使用初始位置
if (data.lat && data.lng) {
center = new TMap.LatLng(data.lat, data.lng)
zoom = 16
}
// 创建地图实例
this.map = new TMap.Map(document.getElementById(this.elementId), {
center: center,
zoom: zoom,
baseMap: {
type: 'vector',
features: ['base', 'building2d', 'point']
}
})
// 添加初始标记（如果有）
if (data.lat && data.lng) {
this.addMarker(new TMap.LatLng(data.lat, data.lng))
}
// 添加点击事件
this.map.on('click', this.handleMapClick)
},
handleMapClick(event) {
// 更新标记位置
this.addMarker(event.latLng)
// 通知父组件位置变化
this.$emit('position-change', {
lat: event.latLng.lat,
lng: event.latLng.lng
})
},
addMarker(position) {
// 清除现有标记
if (this.marker) {
this.marker.setMap(null)
}
// 创建新标记
this.marker = new TMap.MultiMarker({
map: this.map,
styles: {
"marker": new TMap.MarkerStyle({
width: 25,
height: 35,
src: '/img/maper.png',
anchor: { x: 32, y: 32 }
})
},
geometries: [{
id: '1',
styleId: 'marker',
position: position
}]
})
// 移动地图中心到标记位置
this.map.setCenter(position)
this.map.setZoom(16)
},
updatePosition(lat, lng) {
if (!this.map) return
const position = new TMap.LatLng(lat, lng)
this.addMarker(position)
}
},
watch: {
initData: {
deep: true,
handler(newVal) {
if (newVal.element && newVal.element !== this.elementId) {
this.elementId = newVal.element
}
if (this.map) {
this.initMap(newVal)
}
}
}
},
beforeDestroy() {
// 组件销毁时清除地图实例
if (this.map) {
this.map.destroy()
this.map = null
}
}
}
</script>
<style scoped>
.select-map-pos-container {
width: 100%;
height: 100%;
}
</style>