uniapp显示当前位置与所传入位置的距离

简介: uniapp显示当前位置与所传入位置的距离

要在 UniApp 中显示当前位置与所传入位置的距离,你可以借助小程序的 API 来获取当前位置的经纬度,并使用合适的算法计算两点之间的距离。

首先,你可以使用 `uni.getLocation` 方法获取当前位置的经纬度信息。示例代码如下:

uni.getLocation({
  success: function (res) {
    const latitude = res.latitude; // 当前位置纬度
    const longitude = res.longitude; // 当前位置经度
    // 在这里执行计算距离的操作
  }
});

接下来,你可以使用 Haversine 公式或其他距离计算公式来计算两个经纬度之间的距离。以下是一个使用 Haversine 公式计算距离的示例代码:

function getDistance(lat1, lon1, lat2, lon2) {
  const R = 6371; // 地球半径,单位为千米
  const dLat = (lat2 - lat1) * Math.PI / 180;
  const dLon = (lon2 - lon1) * Math.PI / 180;
  const a =
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
    Math.sin(dLon / 2) * Math.sin(dLon / 2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  const distance = R * c;
  return distance.toFixed(2); // 保留两位小数
}
// 在获取到当前位置经纬度后,调用 getDistance 方法计算距离
const distance = getDistance(latitude, longitude, targetLatitude, targetLongitude);
console.log('距离:', distance, '千米');

请注意,`targetLatitude` 和 `targetLongitude` 是要比较的目标位置的经纬度。你可以将其替换为你需要比较的位置的具体经纬度值。

以上是一种简单的实现方式,你可以根据自己的需求和场景进行适当调整。希望对你有帮助!如有其他问题,请随时提问。


目录
相关文章
|
5月前
|
JavaScript
js【图解】滚动条的位置(文档与屏幕间的距离),鼠标事件距离(位置),元素距离(位置)
js【图解】滚动条的位置(文档与屏幕间的距离),鼠标事件距离(位置),元素距离(位置)
118 7
|
5月前
|
前端开发
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
122 1
|
7月前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
|
7月前
如何在屏幕的任意位置拖拽控制图片的移动?
如何在屏幕的任意位置拖拽控制图片的移动?
141 1
|
JavaScript 前端开发
js 各种位置获取全解(包括元素属性、鼠标位置、滚动位置)
js 各种位置获取全解(包括元素属性、鼠标位置、滚动位置)
js 各种位置获取全解(包括元素属性、鼠标位置、滚动位置)
|
编解码 前端开发 PHP
悬浮坐标解决方案:如何在图片获取xy鼠标位置和增加标注信息
悬浮坐标解决方案:如何在图片获取xy鼠标位置和增加标注信息
171 0
|
算法 定位技术
枚举地图位置 啊哈,算法上
枚举地图位置 啊哈,算法上
枚举地图位置 啊哈,算法上
|
Web App开发
位置
位置
176 0
|
C++
C++ | 获取第二个屏幕坐标信息
多屏显示的时候需要用到获取第二个或者更多屏幕的方法。
396 0
|
安全
阿里云常见参数获取位置
示例主要介绍阿里云常见参数的获取位置。
604 0
阿里云常见参数获取位置