当前位置:首页 > uni-app

uniapp定位距离

2026-03-05 02:37:45uni-app

uniapp获取定位距离的方法

在uniapp中计算两点之间的定位距离,可以通过H5或小程序原生API获取经纬度后,使用Haversine公式计算。以下是具体实现方式:

获取当前位置经纬度 使用uniapp的uni.getLocation方法获取当前位置坐标:

uniapp定位距离

uni.getLocation({
  type: 'wgs84',
  success: function (res) {
    const currentLat = res.latitude
    const currentLng = res.longitude
    // 获取到当前位置坐标后,可与其他坐标计算距离
  }
})

Haversine距离计算公式 根据两点经纬度计算直线距离(单位:米):

uniapp定位距离

function getDistance(lat1, lng1, lat2, lng2) {
  const radLat1 = lat1 * Math.PI / 180.0
  const radLat2 = lat2 * Math.PI / 180.0
  const a = radLat1 - radLat2
  const b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0
  let distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + 
              Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)))
  distance = distance * 6378.137 * 1000
  return Math.round(distance)
}

计算与目标位置距离 假设目标位置坐标为targetLat, targetLng

const distance = getDistance(currentLat, currentLng, targetLat, targetLng)
console.log('两点距离:', distance, '米')

注意事项

  • 需要配置manifest.json中的定位权限
  • iOS需在隐私描述中添加定位用途说明
  • 高精度定位需要GPS支持,室内可能误差较大
  • 部分国产安卓机需要动态申请定位权限

扩展方案

对于需要持续计算距离的场景(如运动轨迹),建议:

  • 使用uni.onLocationChange监听位置变化
  • 加入防抖处理避免频繁计算
  • 使用地图组件的测距功能(如高德/百度地图SDK)可获得更高精度

标签: 距离uniapp
分享给朋友:

相关文章

uniapp隐藏滚动条

uniapp隐藏滚动条

在UniApp中隐藏滚动条可以通过以下几种方法实现,具体根据使用场景选择: 全局样式设置(APP/H5) 通过修改全局CSS样式隐藏滚动条,适用于所有页面: ::-webkit-scrollbar…

uniapp安装uview

uniapp安装uview

安装uView到UniApp项目 方法一:通过npm安装(推荐) 确保项目已初始化npm,在项目根目录执行以下命令: npm install uview-ui 在main.js文件中引入并注册uV…

uniapp前端项目

uniapp前端项目

Uniapp 前端项目开发指南 Uniapp 是一个基于 Vue.js 的跨平台开发框架,支持一次开发,多端发布(如微信小程序、H5、App 等)。以下是关于 Uniapp 前端项目的关键信息: 环…

uniapp关闭侧滑

uniapp关闭侧滑

禁用全局侧滑返回功能 在pages.json中配置全局禁止侧滑返回: { "globalStyle": { "popGesture": "none" } } 禁用单个页面侧滑…

uniapp 线程

uniapp 线程

uniapp 线程的概念 在 uniapp 中,线程的概念与原生应用开发有所不同。由于 uniapp 是基于 JavaScript 的运行环境,它并不直接支持多线程操作。JavaScript 本身是单…

uniapp 摇杆

uniapp 摇杆

uniapp 实现虚拟摇杆的方法 在uniapp中实现虚拟摇杆功能,通常需要结合canvas绘制和触摸事件监听。以下是具体实现方案: 基础摇杆实现 创建canvas画布 在template中添加…