48ea9c43
 wuxw
巡检开发完成
|
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
|
<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
}
|
|
9d019fa6
wuxw
测试OA相关流程
|
53
54
|
let TMap = window.TMap
|
|
48ea9c43
wuxw
巡检开发完成
|
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
|
// 创建地图实例
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)
}
// 创建新标记
|
|
9d019fa6
wuxw
测试OA相关流程
|
93
94
|
let TMap = window.TMap
|
|
48ea9c43
wuxw
巡检开发完成
|
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
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
|
|
9d019fa6
wuxw
测试OA相关流程
|
119
120
|
let TMap = window.TMap
|
|
48ea9c43
wuxw
巡检开发完成
|
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
150
151
152
153
154
|
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>
|
