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` 是要比较的目标位置的经纬度。你可以将其替换为你需要比较的位置的具体经纬度值。

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


目录
相关文章
|
JavaScript 容器 前端开发
js计算元素距离顶部的高度及元素是否在可视区判断
前言:   在业务当中,我们经常要计算元素的大小和元素在页面的位置信息。比如说,在一个滚动区域内,我要知道元素A是在可视区内,还是在隐藏内容区(滚动到外边看不到了)。有时还要进一步知道,元素是全部都显示在可视区,还是有部分在可视区部分在隐藏内容区。
5409 0
|
5月前
|
JavaScript
js【图解】滚动条的位置(文档与屏幕间的距离),鼠标事件距离(位置),元素距离(位置)
js【图解】滚动条的位置(文档与屏幕间的距离),鼠标事件距离(位置),元素距离(位置)
113 7
|
7月前
|
索引
将数组指定索引位置的元素 移动到 目标索引位置,且不改变其他元素原本的顺序,注意这个不是对调元素位置,是移动某一个元素位置不影响其他元素顺(使用场景:拖拽改变数据的顺序,点击上下左右箭头移动元素顺序)
将数组指定索引位置的元素 移动到 目标索引位置,且不改变其他元素原本的顺序,注意这个不是对调元素位置,是移动某一个元素位置不影响其他元素顺(使用场景:拖拽改变数据的顺序,点击上下左右箭头移动元素顺序)
|
7月前
|
容器
微搭低代码实现下拉框动态填充值
微搭低代码实现下拉框动态填充值
|
7月前
如何在屏幕的任意位置拖拽控制图片的移动?
如何在屏幕的任意位置拖拽控制图片的移动?
127 1
|
JavaScript 前端开发
js 各种位置获取全解(包括元素属性、鼠标位置、滚动位置)
js 各种位置获取全解(包括元素属性、鼠标位置、滚动位置)
js 各种位置获取全解(包括元素属性、鼠标位置、滚动位置)
|
Web App开发
位置
位置
174 0
|
定位技术
使用地图显示我的位置
使用地图显示我的位置
103 0
|
C++
C++ | 获取第二个屏幕坐标信息
多屏显示的时候需要用到获取第二个或者更多屏幕的方法。
393 0
|
JavaScript
简单js小效果——有版心贴靠栏固定定位怎么不随窗口大小的改变而改变位置
简单js小效果——有版心贴靠栏固定定位怎么不随窗口大小的改变而改变位置