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

在现代移动应用中，地图导航功能已成为必不可少的一部分。通过地图 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 是一个包含多个点（经纬度）的数组，路线会依次连接每个点，展示出路径的轨迹