|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+<template>
|
|
|
2
|
+ <view>
|
|
|
3
|
+ <!-- H5定位必须运行在HTTPS协议下(开发环境localhost除外) -->
|
|
|
4
|
+ <button @click="getLocation">获取当前位置</button>
|
|
|
5
|
+ <view v-if="position">经度: {{ position.longitude }}, 纬度: {{ position.latitude }}</view>
|
|
|
6
|
+ <view v-if="error">{{ error }}</view>
|
|
|
7
|
+
|
|
|
8
|
+ <button @click="getLocationUni">获取位置</button>
|
|
|
9
|
+ </view>
|
|
|
10
|
+</template>
|
|
|
11
|
+
|
|
|
12
|
+<script>
|
|
|
13
|
+export default {
|
|
|
14
|
+ data() {
|
|
|
15
|
+ return {
|
|
|
16
|
+ position: null,
|
|
|
17
|
+ error: null,
|
|
|
18
|
+ parkList: [
|
|
|
19
|
+ {
|
|
|
20
|
+ name: '停车场1',
|
|
|
21
|
+ longitude: 120.312786,
|
|
|
22
|
+ latitude: 36.064812
|
|
|
23
|
+ },
|
|
|
24
|
+ {
|
|
|
25
|
+ name: '停车场2',
|
|
|
26
|
+ longitude: 120.426597,
|
|
|
27
|
+ latitude: 36.242712
|
|
|
28
|
+ },
|
|
|
29
|
+ {
|
|
|
30
|
+ name: '停车场3',
|
|
|
31
|
+ longitude: 120.095783,
|
|
|
32
|
+ latitude: 36.359697
|
|
|
33
|
+ }
|
|
|
34
|
+ ]
|
|
|
35
|
+ }
|
|
|
36
|
+ },
|
|
|
37
|
+ methods: {
|
|
|
38
|
+ // 计算两点之间的距离(使用Haversine公式)
|
|
|
39
|
+ calculateDistance(lat1, lon1, lat2, lon2) {
|
|
|
40
|
+ const R = 6371 // 地球半径(公里)
|
|
|
41
|
+ const dLat = ((lat2 - lat1) * Math.PI) / 180
|
|
|
42
|
+ const dLon = ((lon2 - lon1) * Math.PI) / 180
|
|
|
43
|
+ const a =
|
|
|
44
|
+ Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
|
|
45
|
+ Math.cos((lat1 * Math.PI) / 180) * Math.cos((lat2 * Math.PI) / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2)
|
|
|
46
|
+ const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
|
|
|
47
|
+ return R * c
|
|
|
48
|
+ },
|
|
|
49
|
+
|
|
|
50
|
+ // 根据当前位置匹配最近的停车场
|
|
|
51
|
+ findNearestParking(currentPos, parkList) {
|
|
|
52
|
+ if (!currentPos || !parkList || parkList.length === 0) {
|
|
|
53
|
+ return null
|
|
|
54
|
+ }
|
|
|
55
|
+
|
|
|
56
|
+ let nearestPark = null
|
|
|
57
|
+ let minDistance = Infinity
|
|
|
58
|
+
|
|
|
59
|
+ for (const park of parkList) {
|
|
|
60
|
+ const distance = this.calculateDistance(currentPos.latitude, currentPos.longitude, park.latitude, park.longitude)
|
|
|
61
|
+
|
|
|
62
|
+ if (distance < minDistance) {
|
|
|
63
|
+ minDistance = distance
|
|
|
64
|
+ nearestPark = {
|
|
|
65
|
+ ...park,
|
|
|
66
|
+ distance: distance.toFixed(2) // 保留两位小数
|
|
|
67
|
+ }
|
|
|
68
|
+ }
|
|
|
69
|
+ }
|
|
|
70
|
+
|
|
|
71
|
+ return nearestPark
|
|
|
72
|
+ },
|
|
|
73
|
+
|
|
|
74
|
+ getLocationUni() {
|
|
|
75
|
+ uni.getLocation({
|
|
|
76
|
+ type: 'wgs84',
|
|
|
77
|
+ success: (res) => {
|
|
|
78
|
+ this.position = {
|
|
|
79
|
+ longitude: res.longitude,
|
|
|
80
|
+ latitude: res.latitude
|
|
|
81
|
+ }
|
|
|
82
|
+ console.log('🚀 ~ this.position:', this.position)
|
|
|
83
|
+ // 找到最近的停车场
|
|
|
84
|
+ const nearestPark = this.findNearestParking(this.position, this.parkList)
|
|
|
85
|
+ console.log('最近的停车场:', nearestPark)
|
|
|
86
|
+ },
|
|
|
87
|
+ fail: (err) => {
|
|
|
88
|
+ this.error = err.errMsg
|
|
|
89
|
+ }
|
|
|
90
|
+ })
|
|
|
91
|
+ },
|
|
|
92
|
+
|
|
|
93
|
+ getLocation() {
|
|
|
94
|
+ if (navigator.geolocation) {
|
|
|
95
|
+ navigator.geolocation.getCurrentPosition(
|
|
|
96
|
+ (pos) => {
|
|
|
97
|
+ this.position = {
|
|
|
98
|
+ longitude: pos.coords.longitude,
|
|
|
99
|
+ latitude: pos.coords.latitude
|
|
|
100
|
+ }
|
|
|
101
|
+ // 找到最近的停车场
|
|
|
102
|
+ const nearestPark = this.findNearestParking(this.position)
|
|
|
103
|
+ console.log('最近的停车场:', nearestPark)
|
|
|
104
|
+ },
|
|
|
105
|
+ (err) => {
|
|
|
106
|
+ switch (err.code) {
|
|
|
107
|
+ case err.PERMISSION_DENIED:
|
|
|
108
|
+ this.error = '用户拒绝了定位请求'
|
|
|
109
|
+ break
|
|
|
110
|
+ case err.POSITION_UNAVAILABLE:
|
|
|
111
|
+ this.error = '位置信息不可用'
|
|
|
112
|
+ break
|
|
|
113
|
+ case err.TIMEOUT:
|
|
|
114
|
+ this.error = '请求超时'
|
|
|
115
|
+ break
|
|
|
116
|
+ default:
|
|
|
117
|
+ this.error = '未知错误'
|
|
|
118
|
+ }
|
|
|
119
|
+ },
|
|
|
120
|
+ {
|
|
|
121
|
+ enableHighAccuracy: true, // 高精度模式
|
|
|
122
|
+ timeout: 10000, // 超时时间10秒
|
|
|
123
|
+ maximumAge: 0 // 不使用缓存位置
|
|
|
124
|
+ }
|
|
|
125
|
+ )
|
|
|
126
|
+ } else {
|
|
|
127
|
+ this.error = '您的浏览器不支持地理定位'
|
|
|
128
|
+ }
|
|
|
129
|
+ }
|
|
|
130
|
+ }
|
|
|
131
|
+}
|
|
|
132
|
+</script>
|