毕设总结之使用高德地图api实现不同选择条件下的路径选择
需求:选择不同的路径选择方式,得出相应的线路。
代码:
<div class="input-card" style="width: auto;"> <div class="input-item" style="width:auto;">出发起点<input id="text_1" type="text" value="华东交通大学" /> 出发终点<input id="text_2" type="text" value="" /> 路径选择方式<select id="test"> <option value="1">最快捷模式</option> <option value="2">最经济模式</option> <option value="3">最短距离模式</option> <option value="4">考虑实时路况</option> </select> <input type="button" value="查询" onclick="searchByStationName();"/> <button class="btn" onclick="toggle()">显示/隐藏实时路况</button> </div> </div> <script> var map = new AMap.Map('container', {
resizeEnable:true, //是否监控地图容器尺寸变化 zoom: 13, //初始化地图层级 center: [116.397428, 39.90923] //初始化地图中心点 });//实时路况图层 var trafficLayer = newAMap.TileLayer.Traffic({
zIndex:10});
trafficLayer.setMap(map);var isVisible = true;functiontoggle() {if(isVisible) {
trafficLayer.hide();
isVisible= false;
}else{
trafficLayer.show();
isVisible= true;
}
}functionsearchByStationName() {//根据起终点名称规划驾车导航路线 var myselect = document.getElementById("test");var index =myselect.selectedIndex;switch(myselect.options[index].value) {case "1":var driving = newAMap.Driving({
map: map,
panel:"panel",
policy: AMap.DrivingPolicy.LEAST_TIME//最快捷模式 });break;case "2":var driving = newAMap.Driving({
map: map,
panel:"panel",
policy: AMap.DrivingPolicy.LEAST_FEE//最经济模式 });break;case "3":var driving = newAMap.Driving({
map: map,
panel:"panel",
policy: AMap.DrivingPolicy.LEAST_DISTANCE//最短距离模式 });break;case "4":var driving = newAMap.Driving({
map: map,
panel:"panel",
policy: AMap.DrivingPolicy.REAL_TRAFFIC//考虑实时路况 });break;
}
driving.search([
{ keyword: document.getElementById("text_1").value, city: '北京'},
{ keyword: document.getElementById("text_2").value, city: '北京'}
],function(status, result) {if (status === 'complete') {
log.success('绘制驾车路线完成')
}else{
log.error('获取驾车数据失败:' +result)
}
});
}//构造路线导航类 functionBillCalculate() {
}</script>
总结:不同的路径选择方式,policy值需要分别进行书写。