评论

3分钟搞定微信小程序类美团用户商家距离计算

小程序距离计算

前言

小程序实操,距离计算总结。

思路

一共有两种方法,各有利弊:

1.利用小程序的wx.getLocation 方法得到用户的经纬度,然后用已知的商家的经纬进行计算;

2.利用腾讯地图位置服务calculateDistance直接计算;

先熟悉下两个单词:

longitude:经度;

latitude:纬度;

下边是两种方法的具体实现

一、获取用户的位置信息,再进行计算(wx.getLocation)

1.小程序提供了获取用户位置信息的api,所以我们能直接获取到经纬度;

2.在腾讯位置服务坐标拾取器,获取商家的具体经纬度(例:北京故宫博物院116.397027(经度),39.917990(纬度));

3.利用公式进行两点的经纬度计算,需注意:小程序默认坐标系是wgs84,您需设置为gcj02再试;

代码:

Page({
 data:{
    },
 onLoad: function() {
        var _this = this;
        _this.findXy() //查询用户与商家的距离
        },
        
   findXy() { //获取用户的经纬度
        var _this = this
        wx.getLocation({
            type: 'gcj02',
            success(res) {
                _this.getDistance(res.latitude, res.longitude, 39.917990,116.397027)
            }
        })
    },
    
     Rad: function(d) { //根据经纬度判断距离
        return d * Math.PI / 180.0;
    },
    getDistance: function(lat1, lng1, lat2, lng2) {
        // lat1用户的纬度
        // lng1用户的经度
        // lat2商家的纬度
        // lng2商家的经度
        var radLat1 = this.Rad(lat1);
        var radLat2 = this.Rad(lat2);
        var a = radLat1 - radLat2;
        var b = this.Rad(lng1) - this.Rad(lng2);
        var 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) / 10000;
        s = s.toFixed(2) + '公里' //保留两位小数
        console.log('经纬度计算的距离:' + s)
        return s
    }
    )}

二、利用腾讯地图的位置服务

1、先到腾讯位置服务注册登录,申请key、引入依赖。
下图的第三步配置是要在小程序的后台那里设置,记得不要找错地方了。如图:

2、配置完成了之后,小程序重新编译一下

3、求两点距离文档:腾讯位置-两点求距

4、读完可知,我们只需要商家的经纬度即可,我们在小程序里实验一下

// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');

Page({
 onLoad: function() {
        var _this = this;
        _this.findShop() //查询用户与商家的距离
        },
 findShop() { //拿到商家的地理位置,用到了腾讯地图的api
        // 实例化API核心类
        var _that = this
        var demo = new QQMapWX({
            key: '你申请到的key' // 必填
        });
        // 调用接口
        demo.calculateDistance({
            to: [{

                latitude: 39.917990, //商家的纬度
                longitude: 116.397027, //商家的经度
            }],
            success: function(res) {
                let hw = res.result.elements[0].distance //拿到距离(米)
                if (hw && hw !== -1) { //拿到正确的值
                    //转换成公里
                    hw = (hw / 2 / 500).toFixed(2) + '公里'
                } else {
                    hw = "距离太近或请刷新重试"
                }
          
                console.log('腾讯地图计算距离商家' + hw);
            }
        });
    }
})

可能会出现的错误:
{status:199,message:‘此key未开启webservice功能’}

此时需要打开腾讯位置服务-key配置,设置一下刚才申请key的详情页面,把下列选项全部勾上,把你小程序的appid也写上,webservice域名白名单设置为空即可。

保存完,重新编译再试

作者:大师兄

链接:https://segmentfault.com/a/1190000017401316

来源:SegmentFault

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

点赞 3
收藏
评论

4 个评论

  • Tony Stark
    Tony Stark
    2021-04-24

    方案一的精准度如何呢?

    2021-04-24
    赞同
    回复 1
    • ネф イω
      ネф イω
      2021-10-30
      方案一 和 方案二 两者结果是不一样的  方案二不是直线距离,是导航距离
      2021-10-30
      回复
  • 方丘子
    方丘子
    2021-02-21

    请问商家的经纬度如何上传?我上传的经纬度都是array类型的,云开发的有geopoint,方便使用

    2021-02-21
    赞同
    回复 1
    • ネф イω
      ネф イω
      2021-10-30
      使用geopoin
      2021-10-30
      回复
  • 范特东
    范特东
    2021-01-27

    请问有qqmap-wx-jssdk.js对应的wxs文件吗?想要在.wxml中导入使用

    2021-01-27
    赞同
    回复 1
  • 范特东
    范特东
    2021-01-26

    方法一的示例代码中,Page的({ })没匹配上hh

    2021-01-26
    赞同
    回复
登录 后发表内容