uni-app Vue3写小程序时,小程序未获取到定位权限,map组件中的@markertap事件在手机上拖动地图会误触发
uni-app Vue3写小程序时,小程序未获取到定位权限,map组件中的@markertap事件在手机上拖动地图会误触发
| 开发环境 | 版本号 | 项目创建方式 | 
|---|---|---|
| Windows | 11 家庭中文版 22H2 22621.315 | HBuilderX | 
操作步骤:
<map :latitude="latitude" :longitude="longitude" :markers="covers" [@markertap](/user/markertap)="markertap"></map>  
let latitude = ref(39.909)  
let longitude = ref(116.39742)  
const covers = ref([{  
    id: 1,  
    latitude: 39.909,  
    longitude: 116.39742  
}, {  
    id:2,  
    latitude: 39.90,  
    longitude: 116.39  
}])  
function markertap(e) {  
    console.log(e);  
}  
预期结果:
在小程序未获取到定位权限时预览到手机上拖动地图会触发markertap,点击marker点会报错[Vue warn]: Invalid prop: type check failed for prop “modelValue”. Expected String | Number, got Object
at <WellMap >
实际结果:
在小程序未获取到定位权限时预览到手机上拖动地图会触发markertap,点击marker点会报错[Vue warn]: Invalid prop: type check failed for prop “modelValue”. Expected String | Number, got Object
at <WellMap >
bug描述:
开发语言使用的是VUE3
map组件中的@markertap事件在小程序未获取到定位权限时,在电脑的开发者工具上可以正常使用,但是不管是预览还是真机调试 到手机上拖动地图就会触发@markertap,点击marker图标会报错[Vue warn]: Invalid prop: type check failed for prop “modelValue”. Expected String | Number, got Object
at <WellMap >
更多关于uni-app Vue3写小程序时,小程序未获取到定位权限,map组件中的@markertap事件在手机上拖动地图会误触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html
更多关于uni-app Vue3写小程序时,小程序未获取到定位权限,map组件中的@markertap事件在手机上拖动地图会误触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在使用 uni-app 和 Vue3 开发小程序时,如果小程序未获取到定位权限,map 组件中的 @markertap 事件在手机上拖动地图时可能会误触发。这是因为在未获取定位权限的情况下,地图的行为可能会导致事件处理逻辑出现异常。
解决方案
- 
检查定位权限
在map组件加载前,先检查小程序是否已获取定位权限。如果未获取权限,可以提示用户授权。uni.authorize({ scope: 'scope.userLocation', success() { // 用户已授权 }, fail() { // 用户未授权,提示用户前往设置页面开启权限 uni.showModal({ title: '提示', content: '需要获取您的位置信息,请前往设置页面开启定位权限', success(res) { if (res.confirm) { uni.openSetting(); } } }); } }); - 
优化
@markertap事件处理逻辑
在@markertap事件处理函数中,添加额外的逻辑判断,确保在拖动地图时不会误触发事件。const onMarkerTap = (e) => { // 检查是否为有效的事件触发 if (e.markerId) { // 处理 marker 点击事件 console.log('Marker tapped:', e.markerId); } }; - 
使用
@regionchange事件
可以通过监听@regionchange事件来判断用户是否在拖动地图。如果检测到用户正在拖动地图,可以暂时禁用@markertap事件。let isDragging = false; const onRegionChange = (e) => { if (e.type === 'begin') { isDragging = true; } else if (e.type === 'end') { isDragging = false; } }; const onMarkerTap = (e) => { if (!isDragging && e.markerId) { // 处理 marker 点击事件 console.log('Marker tapped:', e.markerId); } }; - 
使用
@tap事件替代@markertap
如果@markertap事件在拖动地图时误触发的频率较高,可以考虑使用@tap事件,并在事件处理函数中手动判断点击的是否是marker。const onTap = (e) => { // 获取点击位置的坐标 const { latitude, longitude } = e.detail; // 遍历所有 marker,判断点击位置是否在某个 marker 的范围内 markers.forEach(marker => { if (isPointInMarker(latitude, longitude, marker)) { // 处理 marker 点击事件 console.log('Marker tapped:', marker.id); } }); }; const isPointInMarker = (lat, lng, marker) => { // 根据 marker 的坐标和大小判断点击位置是否在 marker 的范围内 const markerLat = marker.latitude; const markerLng = marker.longitude; const markerRadius = marker.radius || 0.0001; // 默认半径 const latDiff = Math.abs(lat - markerLat); const lngDiff = Math.abs(lng - markerLng); return latDiff <= markerRadius && lngDiff <= markerRadius; }; 
        
      
                    
                  
                    
