微信小程序地图导航功能实现完整源代码附效果图攻略

一、效果介绍

此攻略实现了微信小程序地图导航功能，用户可以输入起点和终点，点击导航按钮即可在地图上显示导航路线，并提供导航提示功能。

二、实现方式

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,
                    });
                  }
                });
              }
            });
          }
        });
      }
    });
  }
})

至此，即可在小程序中完成导航提示功能。