前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >你在小程序中怎么计算两个经纬度的距离?

你在小程序中怎么计算两个经纬度的距离?

作者头像
酒馆丁老师
修改2020-12-13 17:16:40
2.7K0
修改2020-12-13 17:16:40
举报
你还在为小程序中计算两个经纬度之间的距离发愁吗?

你还在为小程序中地址逆向解析发愁吗?

你还在为小程序中路线规划,地点搜索发愁吗?

好消息!好消息!

腾讯地图官方开始对小程序中位置应用提供支持了!!!(得有一段时间了,最近才发现)

赞呀,再也不用写有关位置的接口让小程序调用了!

欢迎关注,一起搞IT
欢迎关注,一起搞IT

目录

1. 没有官方支持时的调用

2. 有了官方支持时的调用

1

没有官方支持时的调用

在没有官方支持时,小程序中的位置获取,可以采用腾讯地图,高德地图,百度地图都可以,但是你需要先通过小程序的wx.getLocation 获取当前的经纬度,然后再借助第三方地图提供的webservice API ,自己在后端实现一个根据经纬度获取当前位置的接口,然后供小程序调用。

图1 腾讯地图的webservice api 接口

要想获得两个经纬度点时,你可以手动自己写一个获取经纬度距离的函数,代码如下:

代码语言:javascript
复制
// 方法定义 lat,lng 
function GetDistance( lat1,  lng1,  lat2,  lng2){
        var radLat1 = lat1*Math.PI / 180.0;
    var radLat2 = lat2*Math.PI / 180.0;
    var a = radLat1 - radLat2;
    var  b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
        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 ;// EARTH_RADIUS;
            s = Math.round(s * 10000) / 10000;
                return s;
    }
    // 调用 return的距离单位为km
    console.log(GetDistance(22.54605355,114.02597366,22.620315,114.144802));

也可自己调用第三方地图的webservice API 实现自己的服务接口,如图2 腾讯地图webservice API 计算两个经纬度的距离。

如图2 腾讯地图webservice API 计算两个经纬度的距离

2

有了官方支持时的调用

最近需要做小程序的地址解析和计算距离,查看

腾讯地图开放平台时,发现平台已经支持小程序中的使用了,如图3。

图 3 腾讯位置服务支持在小程序中使用

而且调用非常简单:只需要引入他的一个JS 文件,就可以使用了,如图4腾讯位置在小程序中的应用。

图4 腾讯位置服务在小程序中的应用

具体调用实例如下:

代码语言:javascript
复制
var QQMapWX = require('../../mapsdk/qqmap-wx-jssdk.js');
var qqmapsdk;
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  lat_dest:'目标纬度',
  lng_dest:'目标经度',
  location_info:{},
 
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    qqmapsdk = new QQMapWX({
      key: '自己申请一个腾讯位置服务的key'
    });
  },
  bindLocationInput:function(e){
    var that = this;
    // 逆向解析
    qqmapsdk.reverseGeocoder({
      location: '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式
      //get_poi: 1, //是否返回周边POI列表:1.返回;0不返回(默认),非必须参数
      success: function(res) {//成功后的回调
    
        if(res.status==0){

          let locationInfo  = {}
          locationInfo.province = res.result.address_component.province;
          locationInfo.city = res.result.address_component.city;
          locationInfo.district = res.result.address_component.district;
          locationInfo.location_name = locationInfo.province+locationInfo.city+locationInfo.district+res.result.formatted_addresses.recommend;

          console.log(locationInfo.lat_dest+','+locationInfo.lng_dest);

          that.setData({location_info:locationInfo});
          // 计算位置
          qqmapsdk.calculateDistance({
          
            from: '', //若起点有数据则采用起点坐标,若为空默认当前地址
            to: that.data.lat_dest+','+that.data.lng_dest, //终点坐标
            success: function(res) {//成功后的回调
              
              var distance = res.result.elements[0].distance;
              console.log('distance==',distance);
               
            },
            fail: function(error) {
              console.error(error);
            },
            complete: function(res) {
              console.log(res);
            }

          });

          that.setData({report_info:locationInfo});
        }else{

          return app.Tips({title:'请重试!'});
        }
        
        


      },
      fail: function (res) {
        return app.Tips({title:'请重试!'});
    },
     complete: function (res) {
      // console.log(res);
    }

    });
  },
})

3

总结

具体使用中,建议多看文档。

END

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-09-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 丁老师的技术随笔 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档