毕设总结之使用高德地图api实现不同选择条件下的路径选择
时间:2021-06-21 21:07:05
收藏:0
阅读:0
需求:选择不同的路径选择方式,得出相应的线路。
代码:
<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 = new AMap.TileLayer.Traffic({ zIndex: 10 }); trafficLayer.setMap(map); var isVisible = true; function toggle() { if (isVisible) { trafficLayer.hide(); isVisible = false; } else { trafficLayer.show(); isVisible = true; } } function searchByStationName() { // 根据起终点名称规划驾车导航路线 var myselect = document.getElementById("test"); var index = myselect.selectedIndex; switch (myselect.options[index].value) { case "1": var driving = new AMap.Driving({ map: map, panel: "panel", policy: AMap.DrivingPolicy.LEAST_TIME//最快捷模式 }); break; case "2": var driving = new AMap.Driving({ map: map, panel: "panel", policy: AMap.DrivingPolicy.LEAST_FEE//最经济模式 }); break; case "3": var driving = new AMap.Driving({ map: map, panel: "panel", policy: AMap.DrivingPolicy.LEAST_DISTANCE//最短距离模式 }); break; case "4": var driving = new AMap.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) } }); } //构造路线导航类 function BillCalculate() { } </script>
总结:不同的路径选择方式,policy值需要分别进行书写。
评论(0)