• 微信小程序——计算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);
            }
          });
        }
      }
    })

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

  • 相关阅读:

    泛型
    特性
    2.Linux基础入门
    1.Linux介绍及系统安装
    php十七种设计模式适用场合总结
    转载zendframework 插件方式
    常用的Jquery代码片段,没事的时候研究一下
    Zend Framework1.9 模块化搭建
    PHP的设计模式总结命令链模式
  • 原文地址:https://www.cnblogs.com/sese/p/9865851.html
Copyright © 2020-2023  润新知