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

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

代码如下

<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>

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

百度地图路线规划(途经点)相关推荐

百度步行导航加poi搜索android,Android Studio百度地图路线规划以及POI搜索功能的实现...
在Eclipse上开发百度地图的教程比较多,最近用的比较多的是Android Studio平台开发,本文主要是学习如何在Android Studio上进行百度地图的开发. 1.准备工作这第一步网上说 ...
android百度地图路线查询,Android百度地图——路线规划搜索
百度地图提供的路线规划搜索有3种:驾车.公交.步行. 3中方式的使用方法类似,步骤如下: 1.初始化地图 /**初始化百度地图 * */ private void initBaiduMap(){ // ...
java百度地图路线规划_浅谈百度地图WEB开发中的四种路线规划
百度地图在3.0的Javascript api中增加了四种路径规划,分别是:步行.骑行.自驾.公交. 关于路线规划的引用也相当简单,我们以步行为例://实例化地图 var map = new BMap ...
百度地图路线规划onchange事件触发两次冲突解决
var map = new BMap.Map("allmap",{enableMapClick:false}); map.centerAndZoom("福州市&q ...
通过百度地图路线规划获取出行距离与时间
解决步行出行研究中的距离测度问题最近出于研究的目的,需要获取一系列出行起止点间的步行网络距离,这个环节原本在研究设计的时候是预期采用GIS里的网络分析完成.但经过一番尝试后结果实在不尽如人意,很大一 ...
百度地图路线规划重新设置起点、终点图标和路线颜色
重新设置起点.终点图标: var driving = new BMap.DrivingRoute(_this.mapModel, {renderOptions: {map: _this.mapMode ...
java百度地图路线规划,公交路线规划
/** * 设置路线数据. * * @param line 路线数据 */ public void setData(TransitRouteLine line) { mRouteLine = line ...
android 通过scheme唤起百度、高德、腾讯地图路线规划功能，唤起滴滴出行打车功能
import android.content.Context; import android.content.Intent; import android.net.Uri;import java.ut ...
高德地图小程序步行路线显示_微信小程序高德地图路线规划实现过程详解
前言最近项目中做到相关网约车小程序.需要使用到地图中的路线规划,对3种地图进行了分析.这里稍微做一下总结: 百度地图百度坐标 (BD-09) 腾讯地图火星坐标(GCJ-02) 高德地图火星坐标 ...

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

百度地图路线规划(途经点)相关推荐

最新文章

热门文章