请问一下老师，是什么原因导致的效果不能实现？

来源：8-11 自由编程

weixin_慕先生7015352

2020-10-22 17:04:09

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路线规划</title>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce32bba4e74c48d6bc07087c757d66c2&plugin=AMap.Driving,AMap.Autocomplete,AMap.Riding,AMap.Transfer"></script>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        #container {
            width:100%;
             height: 100%;
             position:absolute;
             left:0px;
             top:0px;
        }
        #toolbar{
            position:absolute;
            top:20px;
            left:10px;
            background:rgb(13, 177, 241);
            height: 185px;
            width: 180px;
            padding: 10px 30px;
        }
        .line1,.line2{
            color: #fff;
            background: rgb(8, 111, 151);
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
            position:relative;
        }
        #startNode,#endNode{
            width: 130px;
            height: 20px;
            position: absolute;
            border: none;
            background: none;
            outline: none;
            padding-top: 5px;
            color: #fff;
        }
        #btn{
            width: 60px;
            height: 30px;
            background: skyblue;
            border: none;
            position: absolute;
            right: 30px;
            color: #fff;
            outline:none;
        }
        .icon{
            text-align: center;
        }
        .icon i{
            color:#fff;
            padding:15px 10px;
            cursor:pointer;
            opacity:.5;
        }
       #panel{
        border: 1px solid red;
        position: absolute;
        width: 240px;
        top: 225px;
        /* height: 100px; */
        left: 10px;
       }
       #car{
           opacity:1;
       }

    </style>
</head>
<body>
    <div id="container"></div>
    <div id="toolbar">
        <div class="icon">
            <i class="fa fa-car" id="car"></i>
            <i class="fa fa-bus" id="bus"></i>
            <i class="fa fa-bicycle" id="bicycle"></i>
        </div>
        <div class="line1">起：<input type="text" id="startNode"></div><br/>
        <div class="line2">终：<input type="text" id="endNode"></div><br/>
        <button id="btn">开车去</button>
    </div>
    <div id="panel"></div>


    <script>
        var map = new AMap.Map('container',{
           zoom:11,
           center:[116.37,39.86]
        });

        // var car = document.querySelector('#car');
        // var bus = document.querySelector('#bus');
        // var bicycle = document.querySelector('#bicycle');

        // var startNode = document.querySelector('#startNode');
        // var endNode = document.querySelector('#endNode');

        // var btn = document.querySelector('#btn');
        // var panel = document.querySelector('#panel');



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

        car.onclick=function(){
            car.style.opacity='1';
            bus.style.opacity='0.5';
            bicycle.style.opacity='0.5';
            btn.innerHTML='开车去';

        };
        bus.onclick=function(){
            bus.style.opacity='1';
            car.style.opacity='0.5';
            bicycle.style.opacity='0.5';
            btn.innerHTML='坐公交';

        };
        bicycle.onclick=function(){
            bicycle.style.opacity='1';
            car.style.opacity='0.5';
            bus.style.opacity='0.5';
            btn.innerHTML='骑车去';

        };

        btn.onclick=function(){
            panel.innerHTML='';
            if(btn.innerHTML=='开车去'){
                map.clearMap();

                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=='坐公交'){
                map.clearMap();

                new AMap.Transfer({
                    map:map,
                    panel:'panel',
                    city:'北京'
                }).search([
                    {keyword:startNode.value,city:'北京'},
                    {keyword:endNode.value,city:'北京'}
                ],function(status,data){
                    console.log(data);
                });

            }else if(btn.innerHTML=='骑车去'){
                map.clearMap();

                new AMap.Riding({
                    map:map,
                    panel:'panel',
                    city:'北京'
                }).search([
                    {keyword:startNode.value,city:'北京'},
                    {keyword:endNode.value,city:'北京'}
                ],function(status,data){
                    console.log(data);
                });
            }
        }

    </script>
</body>
</html>
在这里输入代码，可通过选择【代码语言】突出显示