微信小程序路线规划导航，选择起点和终点路线规划

效果图：

实现： 

先添加插件

微信小程序插件 | 腾讯位置服务

腾讯位置服务路线规划 | 小程序插件 | 微信公众平台

在app.json添加插件：

  "plugins": {

    "routePlan": {

      "version": "1.0.19",

      "provider": "wx50b5593e81dd937a"

    }

  }

代码：

// pages/discovery/index.js
const app = getApp()
import {
  wxAppStop
} from '../../utils/util'
import markers from './markers.js'
let plugin = requirePlugin('routePlan');
let key = 'QHMBZ-HR3CO-CJ6WM-SS4CM-4PINO-2ZBAM'; //使用在腾讯位置服务申请的key
let referer = '红狼'; //调用插件的app的名称
var isQiDian = "";
var isZhongDian = "";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isStop: false,
    longitude: '87.5939',
    latitude: '43.83356',
    markers:markers
    
  },
  //显示对话框
  showModal: function (e) {
    var idx = e.detail.markerId;
    if(isQiDian){
      console.log('222222222222')
      isZhongDian = idx;
      this.goDaoHang()
    }else if(isZhongDian){
      console.log('3333333333')
      this.goDaoHang()
    }else{
      isQiDian = idx;
      console.log('1111111111')
    }
  },
  goDaoHang(){
    this.setData({
      goDaoHang:true
    })
  },
  gogogo(){
     // 搜索到的经纬度结果打开地图进行导航
     var e_latitude = Number(this.data.markers[isZhongDian].latitude);
     var e_longitude = Number(this.data.markers[isZhongDian].longitude);

     var s_latitude = Number(this.data.markers[isQiDian].latitude);
     var s_longitude = Number(this.data.markers[isQiDian].longitude);

     let startPoint = JSON.stringify({ //终点
      'name': this.data.markers[isQiDian].callout.content,
      'latitude': s_latitude,
      'longitude': s_longitude
    });
     let endPoint = JSON.stringify({ //终点
       'name': this.data.markers[isZhongDian].callout.content,
       'latitude': e_latitude,
       'longitude': e_longitude
     });
     wx.navigateTo({
       url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&startPoint=' + startPoint
     }); 
  },
  // 定位
  changeLocation(e) {
    const id = e.currentTarget.dataset.id
    const markers = this.data.markers
    this.setData({
      longitude: markers[id].longitude,
      latitude: markers[id].latitude
    })
  },
  onLoad: function (options) {
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

wxml

<van-empty image="error" wx:if="{{isStop}}" description="小程序维护，无法使用" />

<view wx:else>
  <map scale="18" markers="{{markers}}" class="school" id="schoolMap" longitude="{{longitude}}" latitude="{{latitude}}"
    bindmarkertap="showModal"></map>
  <view class="option">
    <button wx:if="{{goDaoHang}}" catchtap="gogogo">开始导航</button>
    <block wx:for="{{markers}}" wx:key="index">
      <button class="btn" bindtap="changeLocation" data-id="{{item.id}}">{{item.callout.content}}</button>
    </block>
  </view>
</view>

 wsxx

.school{
  width: 100%;
  height: 1000rpx;
}
.option{
  padding: 30rpx;
}
.btn{
  font-size: 26rpx;
  display:inline-block;
  margin: 4rpx 8rpx;
}