请问老师我哪里写错了控制台也报一些没见过的错
<!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>
正在回答
同学你好,同学说的控制台出现了一些没见过的报错,是指如下内容吗?
如果是这样的话,那么这个不是报错哦,是警告信息,是搞得地图和浏览器自身的问题,可以忽略的。
祝学习愉快~
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星