小程序中地图的使用

一、腾讯地图（微信小程序JavaScript SDK）

申请密钥key微信小程序JavaScript SDK | 腾讯位置服务

获取当前地址、地址解析

 <!-- wxml -->

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" show-location style="width: 100%; height: 300px;"></map>

//js
var QQMapWX = require('./../../../utils/qqmap-wx-jssdk.js');

var that=this
// 获取当前地址
wx.getLocation({
  type: 'gcj02',
  success:function(res){
    const location={
      lat: res.latitude,
      lng: res.longitude,
    }
    that.setData({
      latitude:res.latitude,
      longitude:res.longitude
    })
    //地址解析
    var demo = new QQMapWX({
      key: '***'// 这个KEY的获取方式在上面链接 腾讯位置服务的开发文档中有详细的申请密钥步骤
    });
    demo.reverseGeocoder({
      location: {
        latitude: location.lat,
        longitude: location.lng
      },
      success: function (res) {
        //获得地址
        that.setData({
          locationTransport:res.result.address
        })
      },
      fail: function (res) {
        console.log(res);
      },
    });
  }
})

路线规划

 <!-- wxml -->
<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" 
     bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" 
     bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>

//js

formSubmit(e) {
    var _this = this;
    var qqmapsdk = new QQMapWX({
      key: '773BZ-NTAWG-SKWQ4-II5RW-XVE33-CUBZF' // 必填
  });
    //调用距离计算接口
    qqmapsdk.direction({
      mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
      //from参数不填默认当前地址
      from: '34.24259,108.93878',
      to: '34.22259,108.94878',
      success (res) {
        console.log('成功后所有数据',res);
        var ret = res;
        var coors = ret.result.routes[0].polyline, pl = [];
        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
        var kr = 1000000;
        console.log('解压前',coors[0]);
        for (var i = 2; i < coors.length; i++) {
          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
        }
        console.log('解压后',coors[0]);
        //将解压后的坐标放入点串数组pl中
        for (var i = 0; i < coors.length; i += 2) {
          pl.push({ latitude: coors[i], longitude: coors[i + 1] })
        }
        console.log('pl追加数据',pl)
        //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
        _this.setData({
          latitude:pl[0].latitude,
          longitude:pl[0].longitude,
          polyline: [{
            points: pl,
            color: '#FF0000DD',
            width: 6
          }]
        })
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });