微信小程序地图导航功能实现完整源代码附效果图攻略
一、效果介绍
此攻略实现了微信小程序地图导航功能,用户可以输入起点和终点,点击导航按钮即可在地图上显示导航路线,并提供导航提示功能。
二、实现方式
1. 准备工作
在微信小程序开发者工具中创建一个新项目,在app.json配置文件中添加需要使用的组件:
{
"usingComponents": {
"map": "../../miniprogram_npm/@vivaxy/wechat-map/index"
}
}
@vivaxy/wechat-map
是一款第三方组件,可以在小程序中使用高德地图。
2. 实现导航功能
在页面中使用map
组件显示地图,使用小程序的input
组件来获取起点和终点位置的输入,并使用高德地图API获取导航路线。
首先,在wxml文件中添加起点和终点位置的输入框和导航按钮:
<view class="form">
<form>
<label for="start">起点位置:</label>
<input id="start" type="text" placeholder="请输入起点位置" bindinput="bindStartInput">
</form>
<form>
<label for="destination">终点位置:</label>
<input id="destination" type="text" placeholder="请输入终点位置" bindinput="bindDestinationInput">
</form>
<button type="primary" bindtap="navigate">导航</button>
</view>
然后,在js文件中实现获取起点和终点位置的函数和导航函数:
Page({
data: {
startLocation: '', // 起点位置
destination: '', // 终点位置
map: null, // 地图对象
polyline: [], // 导航路线
},
// 获取起点位置
bindStartInput(e) {
this.setData({ startLocation: e.detail.value });
},
// 获取终点位置
bindDestinationInput(e) {
this.setData({ destination: e.detail.value });
},
// 点击导航按钮
navigate() {
const that = this;
//获取高德地图的 key,可在高德地图开放平台申请
wx.request({
url: 'https://restapi.amap.com/v3/geocode/geo?key=您在高德地图开放平台的key值&address=' + that.data.startLocation,
success: res => {
const startLocation = res.data.geocodes[0].location.split(',');
wx.request({
url: 'https://restapi.amap.com/v3/geocode/geo?key=您在高德地图开放平台的key值&address=' + that.data.destination,
success: res => {
const destination = res.data.geocodes[0].location.split(',');
wx.request({
url: 'https://restapi.amap.com/v3/direction/walking?key=您在高德地图开放平台的key值&origin=' + startLocation[1] + ',' + startLocation[0] + '&destination=' + destination[1] + ',' + destination[0],
success: res => {
const steps = res.data.route.paths[0].steps;
const polyline = [];
steps.forEach(step => {
step.polyline.split('|').forEach(point => {
const latlng = point.split(',');
polyline.push({
latitude: parseFloat(latlng[1]),
longitude: parseFloat(latlng[0])
});
});
});
that.setData({ polyline });
// 显示地图并设置地图的中心点和缩放
that.data.map = wx.createMapContext('map');
that.data.map.includePoints({
padding: [10],
points: polyline
});
}
});
}
});
}
});
}
})
至此,即可在小程序中完成地图导航功能。
3. 实现导航提示功能
为了让用户更方便地进行导航,我们可以添加导航提示功能。首先,在wxml文件中添加提示框:
<view class="tip">
<view class="tip-content">{{tipText}}</view>
</view>
然后,在js文件中实现导航提示功能:
Page({
data: {
startLocation: '', // 起点位置
destination: '', // 终点位置
map: null, // 地图对象
polyline: [], // 导航路线
stepIndex: 0, // 当前导航到第几步
tipText: '', // 导航提示文字
},
// 中途更新提示
onHandleTip(data) {
this.setData({
stepIndex: data.step.index,
tipText: data.step.instruction,
});
},
// 更新完导航
onHandleEnd(data) {
this.setData({
tipText: '已到达终点!',
});
},
// 点击导航按钮
navigate() {
const that = this;
// 获取高德地图的 key,可在高德地图开放平台申请
wx.request({
url: 'https://restapi.amap.com/v3/geocode/geo?key=您在高德地图开放平台的key值&address=' + that.data.startLocation,
success: res => {
const startLocation = res.data.geocodes[0].location.split(',');
wx.request({
url: 'https://restapi.amap.com/v3/geocode/geo?key=您在高德地图开放平台的key值&address=' + that.data.destination,
success: res => {
const destination = res.data.geocodes[0].location.split(',');
wx.request({
url: 'https://restapi.amap.com/v3/direction/walking?key=您在高德地图开放平台的key值&origin=' + startLocation[1] + ',' + startLocation[0] + '&destination=' + destination[1] + ',' + destination[0],
success: res => {
const steps = res.data.route.paths[0].steps;
const polyline = [];
steps.forEach(step => {
step.polyline.split('|').forEach(point => {
const latlng = point.split(',');
polyline.push({
latitude: parseFloat(latlng[1]),
longitude: parseFloat(latlng[0])
});
});
});
that.setData({ polyline });
// 显示地图并设置地图的中心点和缩放
that.data.map = wx.createMapContext('map');
that.data.map.includePoints({
padding: [10],
points: polyline
});
// 导航提示
wx.getSystemInfo({
success: function (res) {
const navHeight = 64 * (res.windowHeight / 750);
const promptTip = that.selectComponent('#prompt-tip');
promptTip.startNavigation({
steps: steps,
windowHeight: res.windowHeight,
statusBarHeight: res.statusBarHeight * (res.windowWidth / 750),
navHeight: navHeight,
that: that,
});
}
});
}
});
}
});
}
});
}
})
至此,即可在小程序中完成导航提示功能。
总结
通过以上步骤的实现,即可完成微信小程序地图导航功能。要注意实现过程中需要获取高德地图的key值,同时在进行步骤提示功能时,建议使用高级搜索来获取更为精确的结果。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微信小程序地图导航功能实现完整源代码附效果图(推荐) - Python技术站