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

1 回复

更多关于uni-app Vue3写小程序时,小程序未获取到定位权限,map组件中的@markertap事件在手机上拖动地图会误触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-appVue3 开发小程序时,如果小程序未获取到定位权限,map 组件中的 @markertap 事件在手机上拖动地图时可能会误触发。这是因为在未获取定位权限的情况下,地图的行为可能会导致事件处理逻辑出现异常。

解决方案

  1. 检查定位权限
    map 组件加载前,先检查小程序是否已获取定位权限。如果未获取权限,可以提示用户授权。

    uni.authorize({
      scope: 'scope.userLocation',
      success() {
        // 用户已授权
      },
      fail() {
        // 用户未授权,提示用户前往设置页面开启权限
        uni.showModal({
          title: '提示',
          content: '需要获取您的位置信息,请前往设置页面开启定位权限',
          success(res) {
            if (res.confirm) {
              uni.openSetting();
            }
          }
        });
      }
    });
    
  2. 优化 @markertap 事件处理逻辑
    @markertap 事件处理函数中,添加额外的逻辑判断,确保在拖动地图时不会误触发事件。

    const onMarkerTap = (e) => {
      // 检查是否为有效的事件触发
      if (e.markerId) {
        // 处理 marker 点击事件
        console.log('Marker tapped:', e.markerId);
      }
    };
    
  3. 使用 @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);
      }
    };
    
  4. 使用 @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;
    };
回到顶部