小程序 实现计算两点距离使用腾讯地图

1.在小程序页面添加

  <!--输入起点和终点经纬度坐标，格式为string格式-->
<label>起点坐标:
    <input style="border:1px solid #000;" name="start" bindfocus="startLocation" value="{{startName}}"></input>
</label>
        <!--多个终点位置示例：39.984060,116.307520;39.984060,116.507520-->
<label>终点坐标:
    <input style="border:1px solid #000;" name="dest" bindfocus="endLocation" value="{{endName}}"></input>
</label>

        <!--提交表单数据-->
<button bind:tap="distance">计算距离</button>

        <!--渲染起点经纬度到终点经纬度距离，单位为米-->

2.js

// index.js
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;
// 获取应用实例
const app = getApp()

Page({
  data: {
    distance:[],
    start: '',
    startName: '',
    end: '',
    endName: '',
    
  },
      //在Page({})中使用下列代码
    //事件触发，调用接口
    distance(e) {
      var _this = this;
      //调用距离计算接口
      qqmapsdk.calculateDistance({
          //mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行），不填默认：'walking',可不填
          //from参数不填默认当前地址
          //获取表单提交的经纬度并设置from和to参数（示例为string格式）
          from: _this.data.start || '', //若起点有数据则采用起点坐标，若为空默认当前地址
          to: _this.data.end, //终点坐标
          success: function (res) {//成功后的回调
              var res = res.result;
              var dis = [];
              for (var i = 0; i < res.elements.length; i++) {
                  dis.push(res.elements[i].distance); //将返回数据存入dis数组，
              }
              _this.setData({ //设置并更新distance数据
                  distance: dis
              });
          },
          fail: function (error) {
              console.error(error);
          },
          complete: function (res) {
              console.log(res);
          }
      });
  },
  startLocation() {
      wx.getLocation({
          type: 'wgs84',
          success: res => {
              const latitude = res.latitude
              const longitude = res.longitude

              wx.chooseLocation({
                  latitude: latitude,
                  longitude: longitude,
                  success: ret => {
                      let start = ret.latitude + ',' + ret.longitude
                      this.setData({
                          start: start,
                          startName: ret.address
                      })
                  }
              })
          }
      })

  },
  endLocation() {
      wx.getLocation({
          type: 'wgs84',
          success: res => {
              const latitude = res.latitude
              const longitude = res.longitude

              wx.chooseLocation({
                  latitude: latitude,
                  longitude: longitude,
                  success: ret => {
                      let end = ret.latitude + ',' + ret.longitude
                      this.setData({
                          end: end,
                          endName: ret.address
                      })
                  }
              })
          }
      })

  },

  onLoad() {
    qqmapsdk = new QQMapWX({
      key: '******'
  });
    
  }

})