微信小程序

更新：

2018-9-19 腾讯官方经纬度转详细地址，详细地址转经纬度

 

index.wxml

<!--地图容器-->
<map id="myMap" style=" 100%; height: 300px;" longitude="{{longitude}}" latitude="{{latitude}}" scale='{{scale}}' polyline="{{polyline}}" markers="{{markers}}" covers="{{covers}}" show-location></map>




起点：<input placeholder='请输入起点' bindinput='getStart'></input>
终点：<input placeholder='请输入终点' bindinput='getEnd'></input>

两点之间的距离：{{resultDistance}}

<!--绑定点击事件-->
<button bindtap="driving" disabled='{{openNav}}'>开始导航</button>

 

　　

index.wxss

input{
  border: 1px solid #aaa;
}

 

　　

index.js

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

// 实例化API核心类
let qqmapsdk = new QQMapWX({
  key: '填写地图key'
});

Page({

  /**
   * 页面的初始数据
   */
  data: {
    openNav: true
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let _page = this;

    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success: function (res) {
        _page.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          scale: 10
        });
      }
    })
    wx.clearStorageSync('latlngstart');
    wx.clearStorageSync('latlngend');
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 起点
   */
  getStart(e) {
    let _page = this;
    

    /**
     * 修改：以前示例(2018-09-15)地址转经纬度用错接口了
     */
 56     qqmapsdk.getSuggestion({
 57       keyword: e.detail.value,
 58       success: function (res) {
 59         let lat = res.data[0].location.lat;
 60         let lng = res.data[0].location.lng;
 61 
 62         wx.setStorageSync('latlngstart', {
 63           lat: lat,
 64           lng: lng
 65         });
 66       },
 67       fail: function (res) {
 68         console.log(res);
 69       },
 70       complete: function (res) {
 71         console.log(res);
 72       }
 73     });


    /**
     * 修改为（2018-09-19）
     */

 80     qqmapsdk.geocoder({
 81       address: res.address,
 82       success: function(res) {
 83         let lat = res.result.location.lat;
 84         let lng = res.result.location.lng;
 85         wx.setStorageSync('latlngendSend', {
 86           lat: lat,
 87           lng: lng
 88         });
 89 
 90         // 起点经纬度
 91         let latStart = wx.getStorageSync('latlngstartSend').lat;
 92         let lngStart = wx.getStorageSync('latlngstartSend').lng;
 93 
 94         // 终点经纬度
 95         let latEnd = wx.getStorageSync('latlngendSend').lat;
 96         let lngEnd = wx.getStorageSync('latlngendSend').lng;
 97 
 98         qqmapsdk.calculateDistance({
 99           to: [{
100             latitude: latStart,
101             longitude: lngStart
102           }, {
103             latitude: latEnd,
104             longitude: lngEnd
105           }],
106           success: function(res) {
107             console.log(res, '两点之间的距离(代送)：', res.result.elements[1].distance);
108             wx.setStorageSync('kmSend', res.result.elements[1].distance + "");
109           }
110         });
111       }
112     });



    // 如果输入地点为空：则不规划路线
    if (e.detail.value == '') {
      _page.setData({
        openNav: true,
        resultDistance: ''
      });
    } else {
      _page.setData({
        openNav: false
      });
    }
  },

  /**
   * 终点
   */
  getEnd(e) {
    let _page = this;
    // 输入地点获取经纬度,我取得是数据的第一条数据.
    qqmapsdk.getSuggestion({
      keyword: e.detail.value,
      success: function (res) {
        let lat = res.data[0].location.lat;
        let lng = res.data[0].location.lng;

        wx.setStorageSync('latlngend', {
          lat: lat,
          lng: lng
        });
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        console.log(res);
      }
    });
    // 如果输入地点为空：则不规划路线
    if (e.detail.value == '') {
      _page.setData({
        openNav: true,
        resultDistance: ''
      });
    } else {
      _page.setData({
        openNav: false
      });
    }
  },
  //事件回调函数
  driving: function () {

    let _page = this;

    // 起点经纬度
    let latStart = wx.getStorageSync('latlngstart').lat;
    let lngStart = wx.getStorageSync('latlngstart').lng;

    // 终点经纬度
    let latEnd = wx.getStorageSync('latlngend').lat;
    let lngEnd = wx.getStorageSync('latlngend').lng;


    _page.setData({
      latitude: latStart,
      longitude: lngStart,
      scale: 16,
      markers: [{
        id: 0,
        latitude: latStart,
        longitude: lngStart,
        // 起点图标
        iconPath: '../image/location.png'
      },
      {
        id: 1,
        latitude: latEnd,
        longitude: lngEnd,
        // 终点图标
        iconPath: '../image/location.png'
      },
      ]
    });
    ``

    /**
     * 获取两点的距离
     */
    qqmapsdk.calculateDistance({
      to: [{
        latitude: latStart,
        longitude: lngStart
      }, {
        latitude: latEnd,
        longitude: lngEnd
      }],
      success: function (res) {
        console.log(res, '两点之间的距离：', res.result.elements[1].distance);
        _page.setData({
          resultDistance: res.result.elements[1].distance + '米'
        });
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        console.log(res);
      }
    });

    //网络请求设置
    let opt = {
      //WebService请求地址，from为起点坐标，to为终点坐标，开发key为必填
      url: `https://apis.map.qq.com/ws/direction/v1/driving/?from=${latStart},${lngStart}&to=${latEnd},${lngEnd}&key=${qqmapsdk.key}`,
      method: 'GET',
      dataType: 'json',
      //请求成功回调
      success: function (res) {
        let ret = res.data
        if (ret.status != 0) return; //服务异常处理
        let coors = ret.result.routes[0].polyline,
          pl = [];
        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
        let kr = 1000000;
        for (let i = 2; i < coors.length; i++) {
          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
        }
        //将解压后的坐标放入点串数组pl中
        for (let i = 0; i < coors.length; i += 2) {
          pl.push({
            latitude: coors[i],
            longitude: coors[i + 1]
          })
        }
        //设置polyline属性，将路线显示出来
        _page.setData({
          polyline: [{
            points: pl,
            color: '#FF0000DD',
             4
          }]
        })
      }
    };
    wx.request(opt);
  }
})

 

 示例下载：点击下载