From 16e9746e5da1ac0485fde18e71fb7bf8ee376d42 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 19 Jan 2026 11:38:00 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/jagzwxm/ja_web
---
applications/mobile-web-view/src/appComponents/LeafletMap/index.vue | 88 +++++++++++++++++++++++++++++++++----------
1 files changed, 67 insertions(+), 21 deletions(-)
diff --git a/applications/mobile-web-view/src/appComponents/LeafletMap/index.vue b/applications/mobile-web-view/src/appComponents/LeafletMap/index.vue
index b6add64..8e43521 100644
--- a/applications/mobile-web-view/src/appComponents/LeafletMap/index.vue
+++ b/applications/mobile-web-view/src/appComponents/LeafletMap/index.vue
@@ -156,9 +156,9 @@
let locationFlag = false
let watchId = null
let userLocationMarker = null
-const setMapLocation = () => {
- locationFlag = true
+// 初始化实时位置监听
+const initLocationWatch = () => {
// 在WebView加载的网页中
// 检查浏览器是否支持 geolocation
if (navigator.geolocation) {
@@ -166,7 +166,6 @@
// 停止监听位置
navigator.geolocation.clearWatch(watchId)
}
-
// 开始持续获取用户的位置
watchId = navigator.geolocation.watchPosition(
function (position) {
@@ -174,31 +173,26 @@
const lat = position.coords.latitude // 纬度
const lng = position.coords.longitude // 经度
- if (locationFlag) {
- if (userLocationMarker) {
- userLocationMarker.setLatLng([lat, lng])
- } else {
- userLocationMarker = L.marker([lat, lng], {
- icon: L.icon({
+ // 确保位置标记存在并更新位置
+ if (userLocationMarker) {
+ userLocationMarker.setLatLng([lat, lng])
+ } else {
+ userLocationMarker = L.marker([lat, lng], {
+ icon: L.icon({
iconUrl: userLocationIcon, // 图片路径
- iconSize: [24, 24], // 图标尺寸
- iconAnchor: [12, 12], // 锚点位置
- }),
- }).addTo(map)
- }
+ iconSize: [24, 24], // 图标尺寸
+ iconAnchor: [12, 12], // 锚点位置
+ }),
+ }).addTo(map)
+ }
+ // 如果是点击定位按钮触发的，将地图视图定位到当前位置
+ if (locationFlag) {
mapSetView({
lat,
lng,
})
-
locationFlag = false
-
- return
- }
-
- if (userLocationMarker) {
- userLocationMarker.setLatLng([lat, lng])
}
},
function (error) {
@@ -213,6 +207,24 @@
)
} else {
console.log('该浏览器不支持地理定位功能。')
+ }
+}
+
+const setMapLocation = () => {
+ locationFlag = true
+ // 如果还没有开始监听位置，先初始化监听
+ if (!watchId) {
+ initLocationWatch()
+ } else {
+ // 已经在监听位置，会自动定位到当前位置
+ // 可以添加一个视觉反馈，比如位置标记闪烁效果
+ if (userLocationMarker) {
+ // 添加闪烁效果
+ userLocationMarker.getElement().classList.add('location-blink')
+ setTimeout(() => {
+ userLocationMarker.getElement().classList.remove('location-blink')
+ }, 1000)
+ }
}
}
let lastLocationMarker = null
@@ -450,6 +462,9 @@
initMap()
map.addLayer(layers[0].map)
+ // 初始化实时位置监听
+ initLocationWatch()
+
EventBus.on('mapSetView', mapSetView)
EventBus.on('mapAddMarker', mapAddMarker)
EventBus.on('mapAddAirMarker', mapAddAirMarker)
@@ -466,6 +481,17 @@
})
onUnmounted(() => {
+ // 清理位置监听
+ if (watchId) {
+ navigator.geolocation.clearWatch(watchId)
+ watchId = null
+ }
+ // 移除位置标记
+ if (userLocationMarker) {
+ map.removeLayer(userLocationMarker)
+ userLocationMarker = null
+ }
+
EventBus.off('mapSetView', mapSetView)
EventBus.off('mapAddMarker', mapAddMarker)
EventBus.off('mapAddAirMarker', mapAddAirMarker)
@@ -606,4 +632,24 @@
}
}
}
+
+// 位置标记闪烁效果
+.location-blink {
+ animation: blink 1s ease-in-out;
+}
+
+@keyframes blink {
+ 0% {
+ transform: scale(1);
+ opacity: 1;
+ }
+ 50% {
+ transform: scale(1.2);
+ opacity: 0.8;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
</style>
--
Gitblit v1.9.3