feat:登录地图上显示位置

张含笑

2026-01-17 90454a206a3551861319d6c1be029af7c9e4942c

feat:登录地图上显示位置

 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>

 uniapps/work-app/src/pages/login/index.vue

@@ -137,9 +137,7 @@
      userInfo.key,
      userInfo.code
    );
    userStore.setUserInfo(res.data.data);
    console.log('登录成功，WebSocket连接将由全局钩子统一管理');
    
    userStore.setUserInfo(res.data.data);    
    // 请求位置权限并初始化位置服务
    try {
      // 请求位置权限