码迷,mamicode.com
首页 > Windows程序 > 详细

毕设总结之使用高德地图api实现不同选择条件下的路径选择

时间:2021-06-21 21:07:05      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:enable   err   导航   inpu   不同   traffic   ane   条件   sea   

需求:选择不同的路径选择方式,得出相应的线路。

代码:

<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值需要分别进行书写。

毕设总结之使用高德地图api实现不同选择条件下的路径选择

标签:enable   err   导航   inpu   不同   traffic   ane   条件   sea   

原文地址:https://www.cnblogs.com/TomHard/p/14914652.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!