当前位置:首页 > uni-app

uniapp定位距离

2026-02-06 00:50:12uni-app

uniapp获取定位距离的方法

在uniapp中计算两个坐标点之间的距离,可以通过以下步骤实现:

获取用户当前位置 使用uniapp的uni.getLocationAPI获取当前设备的经纬度坐标:

uni.getLocation({
  type: 'wgs84',
  success: function(res) {
    console.log('当前位置纬度:' + res.latitude);
    console.log('当前位置经度:' + 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 s = 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)));
  s = s * 6378.137; // 地球半径(千米)
  s = Math.round(s * 10000) / 10; // 转为米
  return s;
}

实际应用示例 计算当前位置到目标位置的距离:

// 假设目标位置坐标
const targetLat = 39.9042; 
const targetLng = 116.4074;

uni.getLocation({
  type: 'wgs84',
  success: function(res) {
    const distance = getDistance(res.latitude, res.longitude, targetLat, targetLng);
    console.log('距离目标位置:' + distance + '米');
  }
});

注意事项

需要在小程序或App的manifest.json中配置位置权限:

uniapp定位距离

{
  "permission": {
    "scope.userLocation": {
      "desc": "需要获取您的位置信息"
    }
  }
}

对于H5端,需要使用支持HTTPS的环境,部分浏览器可能会限制定位功能。计算结果为直线距离,实际路径距离可能更长。

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

相关文章

uniapp前端页面

uniapp前端页面

Uniapp 前端页面开发指南 Uniapp 是一个基于 Vue.js 的跨平台开发框架,支持一次开发,多端部署(H5、小程序、App等)。以下是开发 Uniapp 前端页面的关键方法和注意事项。…

uniapp面试问啥

uniapp面试问啥

技术基础类问题 UniApp框架特性 跨端实现原理及条件编译的使用场景 如何理解"一次开发,多端运行"的优缺点 rpx与vw/vh单位的适配差异 Vue相关 生命周期在UniA…

uniapp关闭侧滑

uniapp关闭侧滑

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

uniapp斑马

uniapp斑马

uniapp 斑马相关问题解答 uniapp 斑马打印机连接与使用 uniapp 支持通过蓝牙或网络连接斑马打印机,需要借助原生插件或第三方 SDK。以下为常见方法: 蓝牙连接方式 安装 uni-…

uniapp图文

uniapp图文

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

uniapp grid

uniapp grid

uniapp grid 布局实现方法 在 uniapp 中实现 grid 布局可以通过多种方式完成,包括使用内置组件、CSS Grid 或第三方插件。以下是几种常见的实现方法: 使用 uni-gri…