From 4dcb11dddbae2d466255e153c2638c2dd2030f61 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Fri, 27 Feb 2026 11:03:42 +0800
Subject: [PATCH] feat:工单添加位置
---
applications/mobile-web-view/src/appComponents/workMap/index.vue | 75 +++++++++++++++++++++++++++++--------
1 files changed, 58 insertions(+), 17 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..fe67dc4 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) {
@@ -121,11 +121,10 @@
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, // 图片路径
@@ -133,7 +132,10 @@
iconAnchor: [12, 12], // 锚点位置
}),
}).addTo(map)
+ }
+ // 如果是点击定位按钮触发的，将地图视图定位到当前位置
+ if (locationFlag) {
mapSetView({
lat,
lng,
@@ -154,20 +156,25 @@
}
)
} 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 +319,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 +383,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