百度地图路线规划

驾车效果图:

公交效果图

骑行效果图

步行效果图

代码如下:

首先引入地图js 这里用的是3.0 AK需要去申请

<script type="text/javascript" src="//api./api?v=3.0&ak=你的AK"></script>

<template><!--地图--><div style="width: 100%;height: 700px;"><!--始和结束地址--><div id="r-result">请输入开始地点：<el-input id="startKeyword" v-model="startKeyword" clearable maxlength="20" show-word-limit style="width: 400px"/><br>请输入结束地点：<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;">根据起点和终点经纬度驾车导航路线</div></div></template><script>import $ from 'jquery'export default {name: "index",data() {return {startKeyword: '', //开始地址endKeyword: '',//结束地址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); // 开启鼠标滚轮缩放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});//鼠标放在下拉列表上的事件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) { //鼠标点击下拉列表后的事件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; //获取第一个智能搜索的结果//this.startPoint = ppthat.startPoint.lng = pp.lngthat.startPoint.lat = pp.latmap.centerAndZoom(pp, 18);map.addOverlay(new BMap.Marker(pp)); //添加标注}var local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});//this.startKeyword = myValuelocal.search(myValue);}//结束地址var end = new BMap.Autocomplete( //建立一个自动完成的对象{"input": "endKeyword", "location": map});//鼠标放在下拉列表上的事件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) { //鼠标点击下拉列表后的事件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; //获取第一个智能搜索的结果//this.endPoint = ppthat.endPoint.lng = pp.lngthat.endPoint.lat = pp.latmap.centerAndZoom(pp, 18);map.addOverlay(new BMap.Marker(pp)); //添加标注}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"},// 配置跨城公交的换成策略为优先出发早intercityPolicy: BMAP_INTERCITY_POLICY_EARLY_START,// 配置跨城公交的交通方式策略为飞机优先// 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 中 应放在mounted中

百度地图路径规划 驾车不提示行车路线 参考官方的API也无法实现

如有需要途经点 和 解决驾车不提示行车路线 请参考后面的高德路线规划