在现代移动应用中，地图导航功能已成为必不可少的一部分。通过地图 API，我们可以轻松地在应用中集成位置服务和路径规划功能。本篇文章将带大家一起实现一个简单的路径导航功能，使用腾讯地图 API结合微信小程序，实现从当前位置到目标地点的路线规划和展示。
需求概述
我们需要实现以下功能：
- 获取用户当前的位置信息（经纬度）。
- 从后台获取目的地的经纬度。
- 使用腾讯地图的方向查询 API 获取起点到终点的驾车路线。
- 在地图上绘制路线和显示起点、终点的位置。
实现步骤
首先，我们需要安装腾讯地图 SDK。在微信小程序中使用腾讯地图 API，你需要创建一个腾讯云账号并获取到开发者密钥（Key）。
安装腾讯地图 SDK： 将腾讯地图 SDK 的 JavaScript 文件下载并放置到项目的 utils 目录下。例如，下载并使用 qqmap-wx-jssdk1.2 文件。
初始化项目
在小程序的 app.js 中，首先引入腾讯地图 SDK，之后我们可以在页面中使用该 SDK 进行路径规划。
// 引入腾讯地图 SDK
var QQMapWX = require('../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk');
const api = require('../../utils/api.js');
// 实例化腾讯地图 API 核心类
var qqmapsdk = new QQMapWX({
key: 'HLBBZ-UXNCV-OUOPC-5AT7V-Y3UG6-UYB5U' // 请替换成您自己的腾讯地图 API 密钥
});
页面逻辑实现
接下来我们实现微信小程序的页面逻辑，首先在 onLoad 生命周期函数中请求后端接口获取目的地的位置，然后通过 wx.getLocation() 获取当前用户的位置，再调用腾讯地图的 direction API 获取路径规划。
Page({
data: {
// 起点经纬度
srcLat: null,
srcLng: null,
// 终点经纬度
dstLat: null,
dstLng: null,
latitude: '',
longitude: '',
polyline: [],
mapData: []
},
onLoad() {
var _this = this;
// 请求后端接口获取目的地位置
api.post('/app/map/index', { map_id: 16 })
.then((data) => {
console.log(data.data[0]);
this.setData({
dstLat: data.data[0].lat, // 终点纬度
dstLng: data.data[0].lng // 终点经度
});
})
.catch((err) => {
console.error('请求失败', err);
});
// 获取当前位置
wx.getLocation({
type: 'wgs84', // 获取经纬度，默认为 wgs84
success(res) {
_this.setData({
srcLat: res.latitude, // 当前纬度
srcLng: res.longitude // 当前经度
});
// 调用腾讯地图 API 计算路线
qqmapsdk.direction({
mode: 'driving', // 驾车模式
from: {
latitude: _this.data.srcLat,
longitude: _this.data.srcLng
},
to: {
latitude: _this.data.dstLat,
longitude: _this.data.dstLng
},
success: function (res) {
console.log(res);
var coors = res.result.routes[0].polyline, pl = [];
// 坐标解压（前向差分压缩）
var kr = 1000000;
for (var i = 2; i < coors.length; i++) {
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
}
// 将解压后的坐标放入点串数组 pl 中
for (var i = 0; i < coors.length; i += 2) {
pl.push({ latitude: coors[i], longitude: coors[i + 1] })
}
console.log(pl);
// 设置 polyline 属性，绘制路线
_this.setData({
latitude: pl[0].latitude,
longitude: pl[0].longitude,
polyline: [{
points: pl,
color: '#449afb',
width: 4
}]
});
},
fail: function (error) {
console.error(error);
},
complete: function (res) {
console.log(res);
}
});
},
fail(error) {
console.error('获取当前位置失败:', error);
}
});
}
});
展示地图和路径
我们在 wxml 文件中，使用微信小程序提供的 <map> 组件来展示地图，并通过 polyline 属性绘制路径。
<view class="container">
<map
longitude="{
{longitude}}"
latitude="{
{latitude}}"
scale="16"
polyline="{
{polyline}}"
markers="{
{markers}}"
show-compass
enable-3D
enable-overlooking
enable-zoom
style="width: 100%; height: 500px;">
</map>
</view>
通过 latitude 和 longitude 来设置地图的初始中心位置，通过 polyline 来绘制起点到终点的路径。polyline 是一个包含多个点（经纬度）的数组，路线会依次连接每个点，展示出路径的轨迹
总结
在本篇文章中，我们使用腾讯地图 API 和微信小程序实现了一个简单的路径导航功能，展示了如何获取用户当前位置，计算从起点到终点的路径，并在小程序中展示该路径。通过结合腾讯地图的方向查询 API 和微信小程序的地图组件，我们可以快速地开发出强大的地图导航功能。
如果你对地图开发感兴趣，可以深入学习腾讯地图的更多 API 功能，例如：兴趣点查询、周边搜索、路线规划等