当前位置:首页 > 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安装uview

uniapp安装uview

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

uniapp中如何引用echarts

uniapp中如何引用echarts

在uniapp中引用echarts uniapp中引用echarts可以通过原生方式或第三方插件实现,以下是具体方法: 使用原生echarts 安装echarts依赖 在项目根目录下执行命令:…

uniapp 美颜

uniapp 美颜

uniapp 美颜实现方法 在uniapp中实现美颜功能可以通过多种方式完成,以下是一些常见的方法: 使用原生插件 uniapp支持调用原生插件实现美颜效果,适用于对性能要求较高的场景。需要开发原生…

uniapp 搜索

uniapp 搜索

uniapp 搜索功能实现方法 全局搜索组件集成 在pages.json中配置全局搜索栏,适用于所有页面顶部显示搜索框。示例代码: "globalStyle": { "navigationBa…

uniapp 编辑

uniapp 编辑

uniapp 编辑功能实现方法 在uniapp中实现编辑功能通常涉及表单处理、数据绑定和状态管理。以下为常见实现方式: 表单数据双向绑定 使用v-model指令实现表单元素与数据的双向绑定: &l…

uniapp有用

uniapp有用

Uniapp 的优势 Uniapp 是一款基于 Vue.js 的跨平台开发框架,支持一次开发,多端发布,适用于 iOS、Android、Web、小程序等多个平台。其核心优势包括: 跨平台兼容性:…