老师关于搜索城市这个功能,老是报错,麻烦帮我看看代码应该怎么修改
来源:3-12 自由编程
qq_愿_26
2020-04-10 00:00:13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="container"></div>
<div class="setting">
<h3>工具栏</h3>
<div class="citySearch">
<label for="C-search">搜索城市</label>
<input type="text" id="C-search" value="">
<button class="btn" id="C-btn">确定</button>
</div>
<div class="gradeSearch" >
<label for="G-search">设置显示级别</label>
<input type="text" id="G-search" value="">
<button class="btn" id="G-btn">确定</button>
</div>
<div class="remove">
<a herf="#01" class="removeLimit">解除范围限制</a>
</div>
<div class="ShowAddress">
当前所在省/直辖市:<span id="S-city">北京市</span>
</div>
</div>
</body>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=26636651dc8a33e507d8283b5cf8ca9a"></script>
<script type="text/javascript" src="js/addEventListener.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</html>
js:
/*
* @Author: Administrator
* @Date: 2020-03-29 14:13:03
* @Last Modified by: Administrator
* @Last Modified time: 2020-04-09 23:56:04
*/
'use strict';
/*
CSearch : 搜索城市的input
GSearch : 设置级别的input
CBtn : 搜索城市的按钮
GBtn : 设置级别的按钮
remove : 设置限制范围
City : 显示城市名字
*/
window.onload = function(){
var container = document.getElementById("container"),
CBtn = document.getElementById("C-btn"),
GBtn = document.getElementById("G-btn"),
CSearch = document.getElementById("C-search"),
GSearch = document.getElementById("G-search"),
remove = document.querySelector(".remove"),
City = document.querySelector("#C-city");
var map = new AMap.Map('container',{
zoom:11,
center:[121,30]
});
var myBounds = new AMap.Bounds([116.567542,39.997639],[116.22422,39.813285]);
map.setBounds(myBounds);
//搜索城市事件
// 加载插件、DistrictSearch行政区查询服务,提供了根据名称关键字、citycode、adcode 来查询行政区信息的功能
AMap.plugin('AMap.DistrictSearch',function(){
addHandler(CBtn,"click",function(){
new AMap.DistrictSearch().search(CSearch.value,function(status,data){
// console.log(data.districtList);
City.innerHTML = data.districtList[2].name;
// for(var i = 0 ; i<data.districtList.length;i++){
// City.innerHTML = data.districtList[i].name;
// }
});
});
});
//设置级别
GBtn.onclick = function(){
map.setZoom(GSearch.value);
}
}
1回答
好帮手慕慕子
2020-04-10
同学你好,如下id名书写有误, 建议修改:
出现如下报错,name获取不对。
搜索这一块同学想的有些复杂,直接将输入的内容通过setCity方法设置地图显示城市即可,示例:
同学可以测试下,接着完成这个编程题,祝学习愉快~
相似问题