百度地图路线规划(途经点)
程序员文章站
2022-07-02 19:27:56
效果图这里为了方便 我直接使用的是坐标 在实际项目中可以将地址转成坐标代码如下
请输入出行方式： ...
效果图
这里为了方便 我直接使用的是坐标 在实际项目中可以将地址转成坐标
- 代码如下
<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>
这个和上篇博客 只是多了一个途经点 其余功能都是相同的
注意: 只有驾车才会有途经点 其余出行方式没有
本文地址：https://blog.csdn.net/qq_37242720/article/details/112269762
下一篇： github+hexo的个人博客搭建教程