微信小程序 计算两点及多点间的距离+选择地图定位

本文基于腾讯地图开发文档实现此功能

1.首先去腾讯地图开发平台注册，申请自己的应用空间，严格按照以下步骤走完

2.把下载的两个sdk包，放在小程序utils

3.接下来就可以正常使用了
++++++++++++++++++++++++++++++分割线++++++++++++++++++++++++++++++++
3.1功能之一（这是计算多点距离）

wxml

<form bindsubmit="formSubmitone">
    <label>终点坐标:
    <input style="border:1px solid #000;" name="dest"></input>
    </label>
    <!--提交表单数据-->
    <button form-type="submit">计算距离</button>
</form>
<!--渲染起点经纬度到终点经纬度距离，单位为米-->
<view wx:for="{{distance}}" wx:key="index">
    <view>起点到终点的步行距离为{{item}}米</view>
</view>

js

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

  // 实例化API核心类
  var qqmapsdk = new QQMapWX({
    key: '填写自己的' // 必填
  })

  Page({
    /**
     * 页面的初始数据
     */
    data: {

    },

    //触发表单提交事件，调用接口
    formSubmitone(e) {
      console.log(e);
      var _this = this;
      qqmapsdk.geocoder({
        address: e.detail.value.dest, //传入地址（  address: '北京故宫', ）
        success: function (res) {
          console.log(res);
          var path = res.result.location; //接口调用成功，取得地址坐标！！
          var strLocation = path.lat + ',' + path.lng;//这里是两点
          //var strLocation = '39.984060,116.307520;39.984060,116.507520';//这里写上多个坐标就是多点，一个坐标就是两点
          //调用距离计算接口
          qqmapsdk.calculateDistance({
            //mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行），不填默认：'walking',可不填
            mode: 'walking',
            //from参数不填默认当前地址
            //获取表单提交的经纬度并设置from和to参数（示例为string格式）
            from: '', //若起点有数据则采用起点坐标，若为空默认当前地址
            to: strLocation, //终点坐标
            success: function (res) { //成功后的回调
              console.log(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);
            }
          });
        }
      })
    },
   })

++++++++++++++++++++++++++++++分割线++++++++++++++++++++++++++++++++
3.2 功能之二（这是选择地图定位功能）

wxml

<view class="nav" bindtap="checkmap" >▼当前地址:{{area}}</view>

wxss

.nav{
  margin-left: 30%;
}

js

 /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      //获取当前地址
      var _that = this
      wx.getLocation({
        type: 'wgs84',
        success(res) {
          const latitude = res.latitude
          const longitude = res.longitude
          var _this = this;
          qqmapsdk.reverseGeocoder({
            //位置坐标，默认获取当前位置，非必须参数
            //Object格式
            location: {
              latitude: latitude,
              longitude: longitude
            },
            success: function (res) { //成功后的回调
              console.log(res);
              var res = res.result;
              var mks = [];
              //当get_poi为0时或者为不填默认值时，检索目标位置，按需使用
              mks.push({ // 获取返回结果，放到mks数组中
                title: res.address,
                id: 0,
                latitude: res.location.lat,
                longitude: res.location.lng,
                iconPath: '/images/car_s.png', //图标路径
                width: 20,
                height: 20,
                callout: { //在markers上展示地址名称，根据需求是否需要
                  content: res.address,
                  color: '#000',
                  display: 'ALWAYS'
                }
              });
              _that.setData({ //设置markers属性和地图位置poi，将结果在地图展示
                markers: mks,
                poi: {
                  latitude: res.location.lat,
                  longitude: res.location.lng
                },
                area: res.ad_info.city
              });
            },
          })
        }
      })
    },
    //选择地图
    checkmap() {
      var _that = this
      wx.chooseLocation({
        latitude: 0,
        success: function (res) {
          wx.setStorageSync('city', res.address)
          _that.setData({
            area: res.address
          })
        }
      })
    },

++++++++++++++++++++++++++++++分割线++++++++++++++++++++++++++++++++
3.3（展示自己定位+地图）同样引入utils里面的sdk包

wxml

<map id="myMap"
    markers="{{markers}}"
    style="width:100%;height:300px;"
    longitude="{{poi.longitude}}"
    latitude="{{poi.latitude}}" scale='16' show-location>
</map>

<view>当前位置为：{{area}}</view>
<button bindtap="getmap" >获取地址</button>

js

 data: {
    latitude:"",
    longitude:"",
    markers:"",
    poi:"",
  },
  getmap(){
    var _this=this
    wx.getLocation({
      type: 'wgs84',
      success (res) {
        const latitude = res.latitude
        const longitude = res.longitude
        qqmapsdk.reverseGeocoder({
           //Object格式
            location: {
              latitude: latitude,
              longitude: longitude
            },
          success: function(res) {//成功后的回调
            console.log(res);
            var res = res.result;
            var mks = [];
            mks.push({ // 获取返回结果，放到mks数组中
              title: res.address,
              id: 0,
              latitude: res.location.lat,
              longitude: res.location.lng,
              iconPath: '/images/car.png',//图标路径
              width: 20,
              height: 20,
              callout: { //在markers上展示地址名称，根据需求是否需要
                content: res.address,
                color: '#000',
                display: 'ALWAYS'
              }
            });
            _this.setData({ //设置markers属性和地图位置poi，将结果在地图展示
              markers: mks,
              poi: {
                latitude: res.location.lat,
                longitude: res.location.lng
              },
              area:res.ad_info.city
            });
          },
        })
      }
     })
  },