zoukankan      html  css  js  c++  java
  • 微信小程序——计算2点之间的距离

    关于计算2点之间的距离都依赖了腾讯地图,所以请先在腾讯地图官网申请key。具体流程看下图:

    下面具体讲计算2点之间距离的方法。

    方法一:

    1.通过 wx.getLocation(Object object)  获取用户当前的经度,纬度:

    getPosition: function () {
        var that = this;
        wx.getLocation({
          success: function (res) {
            that.setData({
              fromLng: res.longitude,
              fromLat: res.latitude
            })
          }
        })
      },

    2.通过 腾讯地图 逆解析 你的目的地地址,获取经度,纬度:

    wx.request({
      url: 'https://apis.map.qq.com/ws/geocoder/v1/',
      data: {
        "key": "你的腾讯地图 key",
        "address": "目的地"
      },
      method: 'GET',
      success: function (res) {
        if (res.data.result) {
          const addressLocation = res.data.result.location;
          const courseLat = addressLocation.lat;//获取目的地的纬度
          const courseLng = addressLocation.lng;//获取目的地的经度
        } 
        that.setData({
          toLat: courseLat,
          toLng:courseLng 
        })
      }
    }) 

    3.定义 计算距离的 方法:

    getDistance: function(lat1, lng1, lat2, lng2) {
      lat1 = lat1 || 0;
      lng1 = lng1 || 0;
      lat2 = lat2 || 0;
      lng2 = lng2 || 0;
    
      var rad1 = lat1 * Math.PI / 180.0;
      var rad2 = lat2 * Math.PI / 180.0;
      var a = rad1 - rad2;
      var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
      var r = 6378137;
      var distance = r * 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)));
      
      return distance;
    }

    4.调用该方法:

    getDistance(fromLng,fromLat,toLat,toLng)

    我需要同时计算多条数据的距离,我发现在遍历返回目的地经纬度的时候,它返回来的结果并不是按照你列表的顺序返回来的,而且有些地址还解析不出来。

    不知道是我的写法有问题,还是接口调用的问题。如果哪位大神看到网上有这种示例,麻烦提供一下链接给我,借鉴学习一下~后面我采取的是下面这种方法:

    方法二:通过腾讯地图的距离计算接口

    1.跟方法一第1步一样,获取用户的接口权限;

    2.把 qqmap-wx-jssdk.min.js 加到你小程序;

    3.在需要计算距离的js页面引用 qmap-wx-jssdk.min.js ,并实例化该对象:

    const QQMapWX = require('../../lib/js/qqmap-wx-jssdk.min.js');
    var qqmapsdk;
    
    onLoad: function (options) {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
          key: 'VBXBZ-YVGRW-2Z4RK-O6H27-WEXUT-3ZB2M'
        });
      },

    4.先逆解析目的地,再调用计算距离的接口

    wx.request({
      url: 'https://apis.map.qq.com/ws/geocoder/v1/',
      data: {
        "key": "你的key",
        "address": "目的地名称"
      },
      method: 'GET',
      success: function (res) {
        if (res.data.result) {
          const addressLocation = res.data.result.location;
          const courseLat = addressLocation.lat;
          const courseLng = addressLocation.lng;
          let destinationDistance;
          qqmapsdk.calculateDistance({
            to: [{
              latitude: courseLat,
              longitude: courseLng
            }],
            success: function (res) {
              destinationDistance = res.result.elements[0].distance;
              let distanceKm = `${(destinationDistance/1000).toFixed(2)}Km`;//转换成km
              that.setData({
                distance: distanceKm  
              })
            },
            fail: function (res) {
              console.log(res);
            }
          });
        }
      }
    })

    注意腾讯地图的请求限制:

  • 相关阅读:
    Get distinct count of rows in the DataSet
    单引号双引号的html转义符
    PETS Public English Test System
    Code 39 basics (39条形码原理)
    Index was outside the bounds of the array ,LocalReport.Render
    Thread was being aborted Errors
    Reportviewer Error: ASP.NET session has expired
    ReportDataSource 值不在预期的范围内
    .NET/FCL 2.0在Serialization方面的增强
    Perl像C一样强大,像awk、sed等脚本描述语言一样方便。
  • 原文地址:https://www.cnblogs.com/sese/p/9865851.html
Copyright © 2011-2022 走看看