526互联

微信小程序实时获取用户位置 onLocationChange

发布时间 2023-12-13 15:31:51作者: ZerlinM

首先在app.config.json中配置

requiredBackgroundModes: [
  'location'
],
requiredPrivateInfos: [
  'getLocation',
  'onLocationChange',
  'startLocationUpdate',
],
permission: {
  'scope.userLocation': {
    desc: '你的位置信息将用于小程序位置接口的效果展示',
  },
},

方法调用：

let registerOnlyOnceFlag = false;
let currentLat = 0; // 当前lat，用于判断位置变化则调用存储接口

useDidShow(() => {
  getUserLocationFunc();
});

const getUserLocationFunc = () => {
  Taro.startLocationUpdate({
    success: (res) => {
      console.log('定位成功', res);
      onLocationChangeFunc()
    },
    fail: (err) => {
      Taro.showModal({
        title: '获取定位失败，请重新授权',
        content: '',
        success: (res) => {
          if (res.confirm) {
            Taro.openSetting()
          } else {
            // 容错处理
            // Taro.switchTab({
            //   url: '/pages/home/index'
            // })
          }
        }
      })
    }
  })
}

const listener = (result) => {
  console.log('listener---result', result)
  const { latitude, longitude } = result;
  // 此处存一下，以下代码 本项目是将定位存储再使用，所以多了一层判断，可忽略以下代码
  if (currentLat !== latitude) {
    console.log('save api')
    saveUserPosition({ latitude, longitude, id: userId })
    currentLat = latitude;
  }
}

// 页面隐藏时停止定位
useDidHide(() => {
  Taro.stopLocationUpdate({
    success: () => {
      console.log('success')
    },
    fail: (err) => {
      console.log('err', err)
    }
  })
  Taro.offLocationChange(listener);
});

const onLocationChangeFunc = () => {
  if (!registerOnlyOnceFlag) {
    registerOnlyOnceFlag = true; // 页面刷新后重新注册，否则无需注册多次
    Taro.onLocationChange(listener);
  }
}