当前位置:首页 > 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中配置位置权限:

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

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

uniapp定位距离

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

相关文章

uniapp极光推送

uniapp极光推送

uniapp极光推送集成步骤 准备工作 注册极光推送开发者账号,创建应用获取AppKey。确保uniapp项目已配置好原生插件支持。 安装插件 在uniapp项目manifest.json文件中,选…

uniapp发布到应用商店

uniapp发布到应用商店

发布到苹果App Store 确保开发者账号已注册并加入Apple Developer Program,年费99美元。在Xcode中生成iOS发布证书(.p12)和描述文件(Provisioning…

uniapp请求超时处理

uniapp请求超时处理

uniapp请求超时处理方法 在uniapp中处理请求超时可以通过多种方式实现,以下是几种常见的处理策略: 设置全局请求超时时间 在main.js中配置全局请求超时时间,适用于所有请求: uni…

uniapp前端项目

uniapp前端项目

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

uniapp切片

uniapp切片

uniapp 切片实现方法 在 uniapp 中实现切片功能通常指的是对图片或数据进行分割处理。以下是几种常见的切片实现方式: 图片切片展示 通过 CSS 和 JavaScript 实现图片的网格…

uniapp如何赋值

uniapp如何赋值

uniapp 赋值方法 在 uniapp 中,赋值操作可以通过多种方式实现,具体取决于数据类型和场景。 数据绑定赋值 在模板中使用 {{}} 进行数据绑定,通过修改 data 中的值实现动态更新。…