駕車效果圖:

?

?

公交效果圖

騎行效果圖

步行效果圖

代碼如下:

首先引入地圖js 這里用的是3.0 AK需要去申請

<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=你的AK"></script> <template><!--地圖--><div style="width: 100%;height: 700px;"><!--始和結(jié)束地址--><div id="r-result">請輸入開始地點：<el-input id="startKeyword" v-model="startKeyword" clearable maxlength="20" show-word-limit style="width: 400px"/><br>請輸入結(jié)束地點：<el-input id="endKeyword" v-model="endKeyword" clearable maxlength="20" show-word-limit style="width: 400px"/><br>請輸入出行方式:<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><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="margin-top:600px;margin-left: 200px; width: 100%;height: 300px;text-align: left;overflow:auto;">根據(jù)起點和終點經(jīng)緯度駕車導(dǎo)航路線</div></div> </template><script>import $ from 'jquery'export default {name: "index",data() {return {startKeyword: '', //開始地址endKeyword: '',//結(jié)束地址travelMode: null,//出行方式localSearch:null,//自動搜索map:null,driving: null, //駕車transit: null, //公交walking: null,//步行riding:null, //汽車startPoint: {lnt: null,lat: null},endPoint: {lnt: null,lat: null},time: null, //時間distance: null, //距離}},mounted() {this.init();},created() {},methods: {//駕車checkDriving(){var start = new BMap.Point(this.startPoint.lng, this.startPoint.lat);var end = new BMap.Point(this.endPoint.lng, this.endPoint.lat);this.driving.search(start, end);this.driving.search(end, start);let str = "從"+this.startKeyword+"到"+this.endKeyword+"需要"+this.time+", 距離"+this.distance$("#result").text(str);},//公交checkTransit(){var start = new BMap.Point(this.startPoint.lng, this.startPoint.lat);var end = new BMap.Point(this.endPoint.lng, this.endPoint.lat);this.transit.search(start, end);},//騎行checkRiding(){var start = new BMap.Point(this.startPoint.lng, this.startPoint.lat);var end = new BMap.Point(this.endPoint.lng, this.endPoint.lat);this.riding.search(start, end);},//步行checkWalking(){var start = new BMap.Point(this.startPoint.lng, this.startPoint.lat);var end = new BMap.Point(this.endPoint.lng, this.endPoint.lat);this.walking.search(start, end);},search(){this.map.clearOverlays(); //清除地圖上所有覆蓋物if (this.startKeyword!='' && this.END!='' && 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("請輸入起點,終點和交通方式")}},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); // 開啟鼠標(biāo)滾輪縮放map.addControl(new BMap.NavigationControl()); // 添加平移縮放控件map.addControl(new BMap.ScaleControl()); // 添加比例尺控件map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件that.map = map;//開始地址var start = new BMap.Autocomplete( //建立一個自動完成的對象{"input": "startKeyword", "location": map});//鼠標(biāo)放在下拉列表上的事件start.addEventListener("onhighlight", function (e) {var str = "";var _value = e.fromitem.value;var value = "";if (e.fromitem.index > -1) {value = _value.province + _value.city + _value.district + _value.street + _value.business;}str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;value = "";if (e.toitem.index > -1) {_value = e.toitem.value;value = _value.province + _value.city + _value.district + _value.street + _value.business;}str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;//G("searchResultPanel").innerHTML = str;});var myValue;start.addEventListener("onconfirm", function (e) { //鼠標(biāo)點擊下拉列表后的事件var _value = e.item.value;myValue = _value.province + _value.city + _value.district + _value.street + _value.business;setPlace();});function setPlace(){map.clearOverlays(); //清除地圖上所有覆蓋物function myFun(){var pp = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結(jié)果//this.startPoint = ppthat.startPoint.lng = pp.lngthat.startPoint.lat = pp.latmap.centerAndZoom(pp, 18);map.addOverlay(new BMap.Marker(pp)); //添加標(biāo)注}var local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});//this.startKeyword = myValuelocal.search(myValue);}//結(jié)束地址var end = new BMap.Autocomplete( //建立一個自動完成的對象{"input": "endKeyword", "location": map});//鼠標(biāo)放在下拉列表上的事件end.addEventListener("onhighlight", function (e) {var str = "";var _value = e.fromitem.value;var value = "";if (e.fromitem.index > -1) {value = _value.province + _value.city + _value.district + _value.street + _value.business;}str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;value = "";if (e.toitem.index > -1) {_value = e.toitem.value;value = _value.province + _value.city + _value.district + _value.street + _value.business;}str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;//G("searchResultPanel").innerHTML = str;});var myValue2;end.addEventListener("onconfirm", function (e) { //鼠標(biāo)點擊下拉列表后的事件var _value = e.item.value;myValue2 = _value.province + _value.city + _value.district + _value.street + _value.business;setPlace2();});function setPlace2(){map.clearOverlays(); //清除地圖上所有覆蓋物function myFun2(){var pp = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結(jié)果//this.endPoint = ppthat.endPoint.lng = pp.lngthat.endPoint.lat = pp.latmap.centerAndZoom(pp, 18);map.addOverlay(new BMap.Marker(pp)); //添加標(biāo)注}var local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun2});//this.endKeyword = myValue2local.search(myValue2);}//駕車var output = "從" + that.startKeyword + "到" + that.endKeyword + "駕車需要";var searchComplete = function (results) {if (that.driving.getStatus() != BMAP_STATUS_SUCCESS) {return;}var plan = results.getPlan(0);output += plan.getDuration(true) + "\n"; //獲取時間output += "總路程為：";output += plan.getDistance(true) + "\n"; //獲取距離that.time = plan.getDuration(true);that.distance = plan.getDistance(true);}that.driving = new BMap.DrivingRoute(map, {renderOptions: {map: map,autoViewport: true,panel: "result"},onSearchComplete: searchComplete,onPolylinesSet: function () {//console.log(output)//$("#result").text(output);//setTimeout(function(){alert(output)},"1000");}});//公交that.transit = new BMap.TransitRoute(map, {renderOptions: {map: map,autoViewport: true,panel: "result"},// 配置跨城公交的換成策略為優(yōu)先出發(fā)早intercityPolicy: BMAP_INTERCITY_POLICY_EARLY_START,// 配置跨城公交的交通方式策略為飛機優(yōu)先// transitTypePolicy: BMAP_TRANSIT_TYPE_POLICY_AIRPLANE});//步行that.walking = new BMap.WalkingRoute(map, {renderOptions: {map: map,autoViewport: true,panel: "result"}});//騎行that.riding = new BMap.RidingRoute(map, {renderOptions: {map: map,autoViewport: true,panel: "result"}});},},} </script><style scoped>#result {position: fixed;top: 10px;left: 20px;width: 300px;height: 40px;line-height: 40px;text-align: center;background: #fff;box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);border-radius: 7px;z-index: 99;} </style>

?

注意:

如果提示BMap未定義

在vue.config.js? ----? configureWebpack中添加

externals:{'BMap':'BMap' },

地圖初始化不能放在created 中 應(yīng)放在mounted中

?

百度地圖路徑規(guī)劃 駕車不提示行車路線 參考官方的API也無法實現(xiàn)

如有需要途經(jīng)點 和 解決駕車不提示行車路線 請參考后面的高德路線規(guī)劃

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。