微信小程序,利用腾讯地图接口,利用路线规划,计算用户从当前地点开车到固定点所需要的时间(需要考虑道路情况)。生成.js和.wxml,.wxss页面的代码
时间: 2024-05-20 14:17:18 浏览: 97
生成.js代码:
const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
const qqmapsdk = new QQMapWX({
key: '你的腾讯地图key'
});
Page({
data: {
distance: '',
duration: ''
},
onLoad: function () {
this.getRoutePlan();
},
getRoutePlan: function () {
let that = this;
wx.getLocation({
type: 'gcj02',
success: function (res) {
let startLat = res.latitude;
let startLng = res.longitude;
let endLat = 39.908823;
let endLng = 116.397470;
qqmapsdk.direction({
mode: 'driving',
from: {
latitude: startLat,
longitude: startLng
},
to: {
latitude: endLat,
longitude: endLng
},
success: function (res) {
let distance = res.result.routes[0].distance;
let duration = res.result.routes[0].duration;
that.setData({
distance: distance,
duration: duration
})
},
fail: function (res) {
wx.showToast({
title: '路线规划失败',
icon: 'none',
duration: 2000
})
}
})
},
fail: function (res) {
wx.showToast({
title: '获取位置信息失败',
icon: 'none',
duration: 2000
})
}
})
}
})
生成.wxml代码:
<view class="container">
<view class="title">从当前位置到目的地所需时间:</view>
<view class="info">{{duration}}分钟</view>
<view class="title">距离目的地的距离:</view>
<view class="info">{{distance}}米</view>
</view>
生成.wxss代码:
.container {
margin-top: 50rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.title {
font-size: 28rpx;
margin-bottom: 20rpx;
}
.info {
font-size: 24rpx;
color: #333;
margin-bottom: 30rpx;
}
阅读全文