微信小程序-计算两个坐标点之间的距离(附两种解决方案)

一、常见场景

例:

  • 外卖距离
  • 地图距离
  • 商家距离
  • 景点距离
  • 司机距离
  • 超出距离检测
  • ···

二、获取当前位置信息(经纬度)

  • 注意:需要在app.json开启位置授权相关
  • app.json ↓
json 复制代码
"permission": {
    "scope.userLocation": {
      "desc": "您的位置将在小程序地图上展示"
    }
  },
"requiredPrivateInfos": [
    "getLocation",
    "chooseLocation"
]
  • 获取当前位置信息Api
javascript 复制代码
var that = this
wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        console.log(res)
        that.setData({
          wd: res.latitude,
          jd: res.longitude
        })
        console.log(that.data.wd);
        console.log(that.data.jd);
      }
})

三、计算方法

方法一、使用哈弗辛公式(换算弧度计算)

  • 可根据上述获取当前位置信息后的经纬度做两点中的其中一点参数,也可以取任意两个点的经纬度作为参数
  • lat1、lng1、lat2、lng2分别为经纬1与经纬2的经纬度
  • 参数-例:this.distance(119,54454, 20.45454, 120,54454, 21.45454)
ini 复制代码
//根据经纬度计算距离
distance(lat1, lng1, lat2, lng2) {
    var that = this;
    let rad1 = lat1 * Math.PI / 180.0;
    let rad2 = lat2 * Math.PI / 180.0;
    let a = rad1 - rad2;
    let 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(rad1) * Math.cos(
      rad2) * Math.pow(
      Math.sin(b / 2), 2)));
    s = s * 6378.137;
    s = Math.round(s * 10000) / 10000;
    s = s.toString();
    s = s.substring(0, s.indexOf('.') + 2);
    console.log('距离:', s);
    return s; //返回距离
},

方法二、使用欧几里得距离公式(两点直线距离)

  • 可根据上述获取当前位置信息后的经纬度做两点中的其中一点参数,也可以取任意两个点的经纬度作为参数
  • point1、point2分别为经纬1与经纬2的对象
  • 参数-例:this.calculateDistance({x:20.45454,y:119,54454 },{x:21.45454,y:120,54454 })
javascript 复制代码
  // 计算两点之间的距离  
calculateDistance(point1,point2){
    // 计算距离  
    var distance = Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2))* 100;
    // 显示结果  
    console.log(distance , '计算');
  },
相关推荐
飞翔的佩奇15 分钟前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15881 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追2 小时前
Vue组件化开发
前端·html
艾德金的溪2 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长2 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH2 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴2 小时前
Android Studio新手开发第二十六天
android·前端·android studio
stark张宇3 小时前
超越 Hello World:深入小程序 Hybrid 初衷、安全配置与上线全链路
nginx·微信小程序·php
JH30733 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构
yi碗汤园3 小时前
【超详细】C#自定义工具类-StringHelper
开发语言·前端·unity·c#·游戏引擎