微信小程序地图开发总结-规划路线

在现代移动应用中，地图导航功能已成为必不可少的一部分。通过地图 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',  // 获取经纬度，默认为 wgs84success(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-zoomstyle="width: 100%; height: 500px;"></map>
</view>

通过 latitude 和 longitude 来设置地图的初始中心位置，通过 polyline 来绘制起点到终点的路径。polyline 是一个包含多个点（经纬度）的数组，路线会依次连接每个点，展示出路径的轨迹