更新：
2018-9-19 腾讯官方经纬度转详细地址，详细地址转经纬度
index.wxml
<!--地图容器-->
<map id="myMap" style="width: 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',
width: 4
}]
})
}
};
wx.request(opt);
}
})
示例下载：点击下载