老师，请检查，谢谢。

来源：8-11 自由编程
qq_慕移动3101913
2020-02-14 15:43:45
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 8-11自由编程</title>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=48259e2fd01bb69855450c5b97b5ea81&plugin=AMap.Driving,AMap.Transfer,AMap.Riding,AMap.Autocomplete,AMap.PlaceSearch"></script>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        #panel {
            width: 300px;
            height: auto;
            background: white;
            overflow-x: scroll;
            position: fixed;
            top: 10px;
            left: 20px;
        }

        #search {
            background-color: #3691ff;
            width: 300px;
            height: 180px;
            position: absolute;
            left: 10px;
            top: 10px;
        }

        .logo {
            height: 45px;
            line-height: 45px;
            text-align: center;
        }

        .logo .fa {
            width: 50px;
            height: 30px;
            cursor: pointer;
            color: #fff;
            opacity: 0.8;
        }

        .logo .active {
            opacity: 1;
        }

        .li {
            width: 200px;
            height: 30px;
            line-height: 30px;
            margin: 0 auto;
            text-align: center;
            background-color: #2e85f2;
            margin-bottom: 10px;
            font-size: 13px;
            color: #fff;
            opacity: 0.8;

        }

        .Node {
            font-size: 13px;
            padding-left: 5px;
            background: none;
            outline: none;
            border: none;
            color: #fff;
            opacity: 0.8;
        }

        #btn {
            width: 63px;
            height: 26px;
            color: #fff;
            font-size: 13px;
            border: none;
            background-color: #4f9bff;
            position: absolute;
            top: 128px;
            right: 50px;
            border-radius: 2px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <div id="panel"></div>
    <div id='search'>
        <div class="logo">
            <i class="fa fa-car active"></i>
            <i class="fa fa-bus"></i>
            <i class="fa fa-bicycle"></i>
        </div>
        <div class="li origin">起<input type="" name="" placeholder="请输入起点" id='startNode' class="Node"></div>

        <div class="li destination">终<input type="" name="" placeholder="请输入起点" id='endNode' class="Node"></div>

        <button id='btn'>开车去</button>
    </div>

    <script type="text/javascript">
        //获取元素
        var btn = document.getElementById("btn");
        var panel = document.getElementById("panel");
        var startNode = document.getElementById("startNode");
        var endNode = document.getElementById("endNode");
        var fa = document.getElementsByClassName("fa");
        var index = 0;
        var btnText = ["开车去", "坐公交", "骑车去"];


        //创建地图
        var map = new AMap.Map('container', {
            zoop: 11,      //初始的地图级别
            center: [116.379391, 39.861536]   //初始化地图的中心点
        });


        new AMap.Autocomplete({
            input: 'startNode'
        });
        new AMap.Autocomplete({
            input: 'endNode'
        });

        for (var i = 0; i < fa.length; i++) {
            fa[i].setAttribute("data-id", i);  //setAttribute：添加属性data-id
            fa[i].onclick = function () {
                    i=0;
                //获取属性，进行遍历从而改变图标透明度和按钮文字
                index = this.getAttribute("data-id"); //getAttribute：获取属性data-id

                //清除图标的透明度和按钮文字  外循环i = 0时，j内循环，会一直循环，直到满足条件fa.length才退出，继续外循环1=1
                for (var j = 0; j < fa.length; j++) {
                    
                    fa[j].style.opacity = 0.5;
                    btn.innerHTML = "";
                }

                this.style.opacity = 1;  //给当前的元素图标透明度为1，
                btn.innerHTML = btnText[index]; //按钮文字
            }
        }


        btn.onclick = function () {
            map.clearMap();  //清除地图所有覆盖物

            //根据按钮文字判断使用什么路线
            if (btn.innerHTML === '开车去') {
                new AMap.Driving({
                    map: map,
                    panel: 'panel'
                }).search([
                    { keyword: startNode.value, city: '北京' },
                    { keyword: endNode.value, city: '北京' }
                ], function (status, data) {
                    console.log(data);
                })
            } else if (btn.innerHTML === '坐公交') {
                new AMap.Transfer({
                    map: map,
                    pancel: 'pancel'
                }).search([
                    { keyword: startNode.value, city: '北京' },
                    { keyword: endNode.value, city: '北京' }
                ], function (status, data) {
                    console.log(data);
                })
            } else if (btn.innerHTML === '骑车去') {
                new AMap.Riding({
                    map: map,
                    pancel: 'pancel'
                }).search([
                    { keyword: startNode.value, city: '北京' },
                    { keyword: endNode.value, city: '北京' }
                ]), function (status, data) {
                    console.log(data);
                }

            }
        }

    </script>
</body>

</html>
写回答
1回答