请问老师我哪里写错了控制台也报一些没见过的错

请问老师我哪里写错了控制台也报一些没见过的错

<!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=27877845e89a3ff2aa34db42178ea40f&plugin=AMap.Autocomplete,AMap.Driving,AMap.Riding,AMap.Transfer"></script> 

    <!-- 引入图标外链 -->

    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- 样式表 -->

    <style>

        #container {

            width: 100%;

            height: 700px;

        }


        /* 工具栏 */

        .toolBox {

            position: absolute;

            top: 0;

            left: 0;

            width: 240px;

            height: 150px;

            background: skyblue;

        }


        #icons {

            width: 130px;

            margin: 0 auto;

        }


        #icons>i {

            padding: 10px 10px;

            cursor: pointer;

        }


        /* 输入框区域 */

        #inputs>input {

            width: 180px;

            margin: 3px 30px;

        }


        /* 搜索按钮 */

        #searchBtn {

            text-align: right;

            margin-left: 170px;

        }

        /* 显示导航信息容器 */

        #panel{

            position:absolute;

            top:0;

            right:0;

            width:300px;

            background:white;

        }

    </style>

</head>


<body>

    <!-- 创建地图容器 -->

    <div id="container"></div>

    <!-- 显示导航容器 -->

    <div id="panel"></div>

    <!-- 自定义工具栏 -->

    <div class="toolBox">

        <div id="icons">

            <i class="fa fa-car" data-font="驾车"></i>

            <i class="fa fa-bus" data-font="公交"></i>

            <i class="fa fa-bicycle" data-font="骑行"></i>

        </div>

        <div id="inputs">

            <input type="text" id="begin" placeholder="请输入起点">

            <input type="text" id="end" placeholder="请输入终点">

        </div>

        <button id="searchBtn">搜索</button>

    </div>


    <!-- 脚本区域 -->

    <script>

        // 实例化地图

        var map = new AMap.Map('container', {

            zoom: 11,

            center: [116.322056, 39.89491]

        });

        // 使用联想操作 ------- 自动完成插件

        new AMap.Autocomplete({

            input: 'begin'

        });


        new AMap.Autocomplete({

            input: 'end'

        });



        // 点击搜搜按钮时清除地图上所有覆盖物

        searchBtn.onclick = function () {

            map.clearMap();

        }


        // 获取到所有i标签,也就是我们防止图标的元素       

        var is = document.getElementsByTagName('i');

        // console.log(is)


        for (var i = 0; i < is.length; i++) {

            is[i].onclick = function (e) {

                console.log(e.target.dataset.font)

                // 获取搜索按钮元素

                var searchBtn = document.getElementById('searchBtn');

                // 点击不同的方式并且将元素上的data-扩展属性中的内容替换到搜索按钮中

                searchBtn.innerHTML = e.target.dataset.font;

                // 点击开始导航

                // 判断当前搜索按钮的文字来选择导航方式

                searchBtn.onclick = function (e) {

                    // 点击时将当前按钮背景颜色改为白色

                    var searchBtn = document.getElementById('searchBtn');

                    console.log(1)

                    if (searchBtn.innerHTML == '驾车') {

                        // 指定驾车路线

                        new AMap.Driving({

                            map: map,

                            panel: 'panel',

                            city:'北京'

                        }).search([

                                    { keyword:begin.value,city:'北京' },

                                    { keyword:end.value,city:'北京' }

                                  ],function(status,data){

                                        console.log(data)

                            });

                    } else if (searchBtn.innerHTML == '公交') {

                        new AMap.Transfer({

                            map: map,

                            panel: 'panel',

                            city:'北京'

                        }).search([

                                    { keyword:begin.value,city:'北京' },

                                    { keyword:end.value,city:'北京' }

                                  ],function(status,data){

                                        console.log(data)

                            });

                    } else if (searchBtn.innerHTML == '骑行') {

                        new AMap.Riding({

                            map: map,

                            panel: 'panel',

                            city:'北京'

                        }).search([

                                    { keyword:begin.value,city:'北京' },

                                    { keyword:end.value,city:'北京' }

                                  ],function(status,data){

                                        console.log(data)

                            });

                    }else{

                        // 如果直接点击搜索则默认为驾车方式

                        new AMap.Driving({

                            map:map,

                            panel:'panel',

                            city:'北京'

                        }).search([

                                    { keyword:begin.value,city:'北京' },

                                    { keyword:end.value,city:'北京' }

                                  ],function(status,data){

                                        console.log(data)

                            });

                    }

                };

            };

        }

    </script>


</body>


</html>

http://img1.sycdn.imooc.com//climg/5f58985709890f7705100143.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,同学说的控制台出现了一些没见过的报错,是指如下内容吗?

http://img1.sycdn.imooc.com//climg/5f58b302098c5e2106090168.jpg

如果是这样的话,那么这个不是报错哦,是警告信息,是搞得地图和浏览器自身的问题,可以忽略的。

祝学习愉快~

  • 一架小飞机 提问者 #1
    刚开始一直运行不起来,后来不知道为什么突然又可以了。
    2020-09-09 19:00:31
提问者 一架小飞机 2020-09-09 16:57:45

刚刚我突然试了一下就可以了,为什么啊我连续几次遇到这种情况了,是我电脑问题还是高德地图的问题

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师