From 4af871597f94631e18cc03a35bedea2679e14d9f Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Fri, 27 Feb 2026 16:44:06 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
applications/mobile-web-view/src/appComponents/workMap/index.vue | 85 +++++++++++++++++++++++++++++++-----------
1 files changed, 62 insertions(+), 23 deletions(-)
diff --git a/applications/mobile-web-view/src/appComponents/workMap/index.vue b/applications/mobile-web-view/src/appComponents/workMap/index.vue
index 5df7896..88313b7 100644
--- a/applications/mobile-web-view/src/appComponents/workMap/index.vue
+++ b/applications/mobile-web-view/src/appComponents/workMap/index.vue
@@ -103,9 +103,9 @@
let locationFlag = false
let watchId = null
let userLocationMarker = null
-const setMapLocation = () => {
- locationFlag = true
+// 初始化实时位置监听
+const initLocationWatch = () => {
// 在WebView加载的网页中
// 检查浏览器是否支持 geolocation
if (navigator.geolocation) {
@@ -113,7 +113,6 @@
// 停止监听位置
navigator.geolocation.clearWatch(watchId)
}
-
// 开始持续获取用户的位置
watchId = navigator.geolocation.watchPosition(
function (position) {
@@ -121,27 +120,27 @@
const lat = position.coords.latitude // 纬度
const lng = position.coords.longitude // 经度
+ // 确保位置标记存在并更新位置
if (userLocationMarker) {
userLocationMarker.setLatLng([lat, lng])
- }
-
- if (locationFlag) {
+ } else {
userLocationMarker = L.marker([lat, lng], {
icon: L.icon({
iconUrl: userLocationIcon, // 图片路径
- iconSize: [24, 24], // 图标尺寸
- iconAnchor: [12, 12], // 锚点位置
- }),
+ iconSize: [24, 24], // 图标尺寸
+ iconAnchor: [12, 12], // 锚点位置
+ }),
}).addTo(map)
+ }
+ // 如果是点击定位按钮触发的，将地图视图定位到当前位置
+ if (locationFlag) {
mapSetView({
lat,
lng,
})
-
locationFlag = false
}
- // 可以根据位置更新地图或界面
},
function (error) {
// 如果获取位置失败，执行回调
@@ -154,20 +153,26 @@
}
)
} else {
- console.log('Geolocation is not supported by this browser.')
+ console.log('该浏览器不支持地理定位功能。')
}
+}
- // 获取定位信息
- // uni.getLocation({
- // type: 'wgs84', // 返回的经纬度是 WGS84 坐标系（适合地图定位）
- // isHighAccuracy: true,
- // success: function (res) {
- // location.value = res
- // },
- // fail: function (err) {
- // console.log('定位失败：', err)
- // },
- // })
+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
@@ -312,10 +317,24 @@
initMap()
map.addLayer(layers[0].map)
+ // 初始化实时位置监听
+ initLocationWatch()
+
EventBus.on('mapSetView', mapSetView)
})
onUnmounted(() => {
+ // 清理位置监听
+ if (watchId) {
+ navigator.geolocation.clearWatch(watchId)
+ watchId = null
+ }
+ // 移除位置标记
+ if (userLocationMarker) {
+ map.removeLayer(userLocationMarker)
+ userLocationMarker = null
+ }
+
EventBus.off('mapSetView', mapSetView)
if (map) {
map.remove()
@@ -362,4 +381,24 @@
bottom: 76px;
}
}
+
+// 位置标记闪烁效果
+.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