当前位置:首页 > uni-app

uniapp定位距离

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

uniapp获取定位距离的方法

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

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

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

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

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支持,室内可能误差较大
  • 部分国产安卓机需要动态申请定位权限

扩展方案

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

uniapp定位距离

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

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

相关文章

uniapp使用axios无法请求

uniapp使用axios无法请求

uniapp中使用axios请求问题解决方案 在uniapp中使用axios可能会遇到跨域、请求失败或兼容性问题。以下是常见原因及解决方法: 检查axios安装与引入 确保已正确安装axios:…

uniapp 如何封装request请求

uniapp 如何封装request请求

封装 request 请求的核心思路 在 UniApp 中封装请求通常基于 uni.request,通过统一处理 URL、参数、header 和拦截逻辑提升代码复用性。以下是一个完整封装方案: 创建…

uniapp接入

uniapp接入

接入UniApp的基本流程 UniApp是一个基于Vue.js的跨平台开发框架,支持一次开发,多端发布。以下是接入UniApp的基本流程: 环境准备 确保已安装Node.js(建议版本12+)和HB…

uniapp图文

uniapp图文

图文混排实现方式 在uniapp中实现图文混排通常采用<rich-text>组件或自定义样式布局。<rich-text>支持解析HTML字符串,适合动态内容渲染。 <te…

uniapp弹出选择

uniapp弹出选择

实现方式一:使用uni.showActionSheet 在UniApp中,可以通过uni.showActionSheet实现底部弹出的选择菜单。该方法支持自定义选项列表和回调处理。 代码示例:…

uniapp图形绘制

uniapp图形绘制

Uniapp 图形绘制方法 Uniapp 提供了多种图形绘制的方式,适用于不同场景需求。以下是常见的实现方法: Canvas 绘制 Uniapp 支持使用 HTML5 Canvas API 进行图形…