效果圖
這里為了方便 我直接使用的是坐標 在實際項目中可以將地址轉成坐標

• 代碼如下

<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">請輸入途經坐標：<divv-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 = thisvar 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].valuearrPoint[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個markervar marker2 = new BMap.Marker(endPoint);that.map.addOverlay(marker1);that.map.addOverlay(marker2);var lab1 = new BMap.Label("起點", {position: startPoint}); //創建3個labelvar 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);//創建markervar 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個labelvar lab2 = new BMap.Label("終點", {position: endPoint});//var lab3 = new BMap.Label("途經點",{position:myP3});//添加labelthat.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 = thisvar 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>

這個和上篇博客 只是多了一個途經點 其余功能都是相同的
注意: 只有駕車才會有途經點 其余出行方式沒有

總結

以上是生活随笔為你收集整理的百度地图路线规划(途经点)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。