wxml
<!--form表单-->
<form bindsubmit="formSubmit">
<!--输入起点和终点经纬度坐标,格式为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 form-type="submit">计算距离</button>
</form>
<!--渲染起点经纬度到终点经纬度距离,单位为米-->
<view wx:for="{{distance}}" wx:key="index">
<view>{{startName }}到{{endName}}的步行距离为{{item}}米</view>
</view>
// pages/map/map.js
//要引入的js文件
var QQMapWX = require('../../utils/qqmap-wx.js');
var qqmapsdk = new QQMapWX({
key: '自己的key' // 必填
});
Page({
formSubmit(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) {//成功后的回调
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);
}
});
},
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
console.log(ret)
this.setData({
start:start,
startName:ret.name
})
}
})
}
})
},
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
console.log(ret)
this.setData({
end:end,
endName:ret.name
})
}
})
}
})
},
/**
* 页面的初始数据
*/
data: {
start:"",
end:"",
startName:'',
endName:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
})
参考 微信小程序JavaScript SDK | 腾讯位置服务