百度地图路线规划(途经点)

效果图
这里为了方便 我直接使用的是坐标 在实际项目中可以将地址转成坐标

• 代码如下

<template>
  <div style="width: 100%;height: 700px;">
    <!--始和结束地址-->
    <div id="r-result">
      <div>
        请输入出行方式：
        <el-radio-group v-model="travelMode">
          <el-radio :label="1">驾车</el-radio>
          <el-radio :label="2">公交</el-radio>
          <el-radio :label="3">骑行</el-radio>
          <el-radio :label="4">步行</el-radio>
        </el-radio-group>
      </div>
      请输入开始坐标：
      <el-input id="startKeyword" v-model="startKeyword" clearable maxlength="20" show-word-limit style="width: 400px"/>
      <br>
      <div v-if="travelMode == 1">
        请输入途经坐标：
        <div
          v-for="(domain, index) in domains"
          :label="'途经点' + index"
          :key="domain.key"
        >
          途经点坐标：
          <el-input v-model="domain.value" style="width: 400px;"></el-input>
          <el-button @click.prevent="removeDomain(domain)">删除</el-button>
        </div>
        <el-button @click="addDomain">新增途经点</el-button>
      </div>
      请输入结束坐标：
      <el-input id="endKeyword" v-model="endKeyword" clearable maxlength="20" show-word-limit style="width: 400px"/>
      <br>
      <el-button type="success" @click="search">检索</el-button>
    </div>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    <div></div>
    <div id="allmap" style="width:100%; height:450px;"></div>
    <!--返回结果-->
    <div id="result" style="width: 100%;height: 300px;overflow:auto;">
      根据起点和终点经纬度驾车导航路线
    </div>
  </div>
</template>

<script>
  import $ from "jquery";

  export default {
    name: "index2",
    data() {
      return {
        startKeyword: '',  //开始地址
        midKeyword: '',//途经点
        endKeyword: '',//结束地址
        travelMode: null,//出行方式
        localSearch: null,//自动搜索
        map: null,  //地图
        domains: [],//途经点
      }
    },
    mounted() {
      this.init();
    },
    created() {

    },
    methods: {
      removeDomain(item) {
        var index = this.domains.indexOf(item)
        if (index !== -1) {
          this.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.domains.push({
          value: '',
        });
      },
      search() {
        this.map.clearOverlays();    //清除地图上所有覆盖物
        if (this.travelMode != null) {
          if (this.travelMode == 1) {
            this.checkDriving();
          } else if (this.travelMode == 2) {
            this.checkTransit();
          } else if (this.travelMode == 3) {
            this.checkRiding();
          } else {
            this.checkWalking();
          }
        } else {
          this.$message.error("请选择出行方式")
        }
      },
      //驾车
      checkDriving() {
        var that = this
        var startPoint = new BMap.Point(this.startKeyword.split(",")[0], this.startKeyword.split(",")[1]);
        var endPoint = new BMap.Point(this.endKeyword.split(",")[0], this.endKeyword.split(",")[1]);
        var arrPoint = [];
        //途经点
        for (let i = 0; i < this.domains.length; i++) {
          var value = this.domains[i].value
          arrPoint[i] = new BMap.Point(value.split(",")[0], value.split(",")[1]);
        }

        /* //创建驾车实例
         var driving = new BMap.DrivingRoute(that.map, {
             onSearchComplete: function (results) {
               console.log(results)
               if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
                 // 获取第一条方案
                 var plan = results.getPlan(0);
                 // 获取方案的驾车线路
                 var route = plan.getRoute(0);
                 // 获取每个关键步骤，并输出到页面
                 var s = [];
                 for (var i = 0; i < route.getNumSteps(); i++) {
                   var step = route.getStep(i);
                   console.log(step);
                 }
               }
             }
           }
         )*/

        //创建驾车实例
        var options = {
          onSearchComplete: function (results) {
            console.log("=============")
            console.log(results)
            if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
              // 获取第一条方案
              var plan = results.getPlan(0);
              // 获取方案的驾车线路
              var route = plan.getRoute(0);
              // 获取每个关键步骤，并输出到页面
              var s = [];
              for (var i = 0; i < route.getNumSteps(); i++) {
                var step = route.getStep(i);
                console.log(step);
              }
            }
          }
        };

        var driving = new BMap.DrivingRoute(that.map);
        console.log(driving.getResults)
        // var start = new BMap.Point(116.310791, 40.003419);
        // var end = new BMap.Point(116.486419, 39.877282);
        // driving.search(start, end);

        //判断是否添加途经点
        if (arrPoint.length == 0) {
          driving.search(startPoint, endPoint);
          driving.setSearchCompleteCallback(function () {
            var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组

            var polyline = new BMap.Polyline(pts);
            that.map.addOverlay(polyline);

            var marker1 = new BMap.Marker(startPoint);         //创建3个marker
            var marker2 = new BMap.Marker(endPoint);
            that.map.addOverlay(marker1);
            that.map.addOverlay(marker2);

            var lab1 = new BMap.Label("起点", {position: startPoint});        //创建3个label
            var lab2 = new BMap.Label("终点", {position: endPoint});
            that.map.addOverlay(lab1);
            that.map.addOverlay(lab2);
            setTimeout(function () {
              that.map.setViewport([startPoint, endPoint]);          //调整到最佳视野
            }, 1000)
          })
        } else {
          //添加了途经点
          driving.search(startPoint, arrPoint[0]);
          for (let i = 0; i < arrPoint.length - 1; i++) {
            driving.search(arrPoint[i], arrPoint[i + 1]);
          }
          driving.search(arrPoint[arrPoint.length - 1], endPoint);

          driving.setSearchCompleteCallback(function () {
            var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组

            var polyline = new BMap.Polyline(pts);
            that.map.addOverlay(polyline);

            //创建marker
            var marker1 = new BMap.Marker(startPoint);
            var marker2 = new BMap.Marker(endPoint);

            //添加标注点
            that.map.addOverlay(marker1);
            that.map.addOverlay(marker2);
            for (let i = 0; i < arrPoint.length; i++) {
              var marker = new BMap.Marker(arrPoint[i]);
              that.map.addOverlay(marker);
            }


            var lab1 = new BMap.Label("起点", {position: startPoint});        //创建3个label
            var lab2 = new BMap.Label("终点", {position: endPoint});
            //var lab3 = new BMap.Label("途经点",{position:myP3});

            //添加label
            that.map.addOverlay(lab1);
            that.map.addOverlay(lab2);

            //新数组 用于调整最佳视野
            var newArr = [];
            newArr.push(startPoint);
            for (let i = 0; i < arrPoint.length; i++) {
              newArr.push(arrPoint[i])
              var lab = new BMap.Label("途经点", {position: arrPoint[i]});
              that.map.addOverlay(lab);
            }
            newArr.push(endPoint)

            setTimeout(function () {
              that.map.setViewport(newArr);          //调整到最佳视野
            }, 1000)
          });
        }
      },
      //公交
      checkTransit() {
        var that = this
        var transit = new BMap.TransitRoute(that.map, {
          renderOptions: {
            map: that.map,
            autoViewport: true,
            panel: "result"

          },
          // 配置跨城公交的换成策略为优先出发早
          intercityPolicy: BMAP_TRANSIT_POLICY_RECOMMEND,
          //返回方案个数
          //pageCapacity: 3,
          // 配置跨城公交的交通方式策略为飞机优先
          // transitTypePolicy: BMAP_TRANSIT_TYPE_POLICY_AIRPLANE
        });

        var start = new BMap.Point(this.startKeyword.split(",")[0], this.startKeyword.split(",")[1]);
        var end = new BMap.Point(this.endKeyword.split(",")[0], this.endKeyword.split(",")[1]);
        transit.search(start, end);
      },

      //骑行
      checkRiding() {
        var that = this;
        var riding = new BMap.RidingRoute(that.map, {
          renderOptions: {
            map: that.map,
            autoViewport: true,
            panel: "result"
          }
        });
        var start = new BMap.Point(this.startKeyword.split(",")[0], this.startKeyword.split(",")[1]);
        var end = new BMap.Point(this.endKeyword.split(",")[0], this.endKeyword.split(",")[1]);
        riding.search(start, end);
      },

      //步行
      checkWalking() {
        var that = this;
        var walking = new BMap.WalkingRoute(that.map, {
          renderOptions: {
            map: that.map,
            autoViewport: true,
            panel: "result"
          }
        });
        var start = new BMap.Point(this.startKeyword.split(",")[0], this.startKeyword.split(",")[1]);
        var end = new BMap.Point(this.endKeyword.split(",")[0], this.endKeyword.split(",")[1]);
        walking.search(start, end);
      },

      //初始化
      init() {
        var that = this;
        //初始化
        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
        map.setMapStyleV2({styleId: 'bf6890d1f6963aa54a40f7c18e9227a1'});
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
        map.addControl(new BMap.NavigationControl());  // 添加平移缩放控件
        map.addControl(new BMap.ScaleControl());       // 添加比例尺控件
        map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
        that.map = map;
      },
    }
  }
</script>

这个和上篇博客 只是多了一个途经点 其余功能都是相同的
注意: 只有驾车才会有途经点 其余出行方式没有