实现小程序中的在线地图路线规划功能

现在，许多小程序都内嵌了地图功能，通过在线地图我们可以方便地查找地点、导航路线规划等。在本篇博客中，我将介绍如何在小程序中实现在线地图路线规划功能。

准备工作

在开始之前，我们需要准备以下材料：

• 小程序开发工具
• 腾讯地图开发者账号（申请Key）
• 小程序代码基础知识

创建地图页面

首先，我们需要在小程序中创建地图页面。可以在小程序开发工具中，通过新建页面的方式创建一个名为map的页面。

接下来，在map.wxml文件中添加以下代码：

<!-- map.wxml -->
<view class="container">
  <map id="myMap" show-location="{{true}}" bindmarkertap="handleMarkerTap" bindcallouttap="handleCalloutTap"></map>
</view>

这段代码创建了一个包含地图的容器，并设置了地图的样式和事件。

获取地图控件及地理位置权限

// map.js
Page({
  onReady: function () {
    this.mapCtx = wx.createMapContext('myMap');
  },
  onLoad: function () {
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        const latitude = res.latitude;
        const longitude = res.longitude;
        
        this.mapCtx.moveToLocation();
      },
      fail: (err) => {
        console.error('获取定位失败', err);
      }
    });
  },
})

onLoad函数中，我们调用wx.getLocation方法来获取用户当前位置的经纬度，并调用moveToLocation方法将地图移动到当前位置。

实现路线规划

// map.js
Page({
  data: {
    markers: [],
    polyline: []
  },
  
  handleMarkerTap: function (e) {
    const markerId = e.markerId;

    // 根据markerId获取目标位置的经纬度
    const latitude = this.data.markers[markerId].latitude;
    const longitude = this.data.markers[markerId].longitude;
    
    // 调用路线规划接口
    wx.navigateTo({
      url: `plugin://route-plan/route-plan?type=drive&to=${latitude},${longitude}&from=`
    });
  },

  handleCalloutTap: function (e) {
    // 获取点击的markerId，并处理逻辑
  },
  
  onLoad: function () {
    // 获取地理位置, 设置markers数据
    
    // 获取路线规划信息
    wx.request({
      url: 'https://apis.map.qq.com/ws/direction/v1/driving/?from=39.989221,116.306076&to=39.828050,116.436558&key=YOUR_KEY',
      success: (res) => {
        const ret = res.data;
        const coors = ret.result.routes[0].polyline;
        
        // 将经纬度信息转化为polyline坐标对象数组
        for (let i = 2; i < coors.length; i++) {
          coors[i] = coors[i - 2] + coors[i] / 1000000;
        }
        
        const polyline = [{
          points: coors,
          color: '#FF0000DD',
          width: 4,
          dottedLine: false
        }];
        
        this.setData({
          polyline
        });
      },
      fail: (err) => {
        console.error('获取路线规划失败', err);
      }
    });
  }
})

在onLoad函数中，我们使用wx.request方法调用腾讯地图的路线规划接口，根据起点终点的经纬度获取路线规划信息，然后将返回的信息转化为小程序地图需要的polyline数据，并保存在data中。

在handleMarkerTap函数中，我们获取点击的markerId，并根据该Id获取目标位置的经纬度，然后调用wx.navigateTo跳转到地图页面进行路线规划。

总结

通过本篇博客，我们了解了如何在小程序中实现在线地图路线规划功能。首先，我们创建了一个地图页面，并获取了用户的地理位置权限；然后，我们调用腾讯地图的路线规划API，获取路线规划信息，并将其展示在地图上。希望本篇博客对你有所帮助，如有疑问，请留言交流。

本文来自极简博客，作者：网络安全侦探，转载请注明原文链接：实现小程序中的在线地图路线规划功能