老师关于搜索城市这个功能,老是报错,麻烦帮我看看代码应该怎么修改

来源: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名书写有误, 建议修改:

http://img.mukewang.com/climg/5e8fdccd09c41bc410160150.jpg

出现如下报错,name获取不对。

http://img.mukewang.com/climg/5e8fdd2a098d68c120441502.jpg

搜索这一块同学想的有些复杂,直接将输入的内容通过setCity方法设置地图显示城市即可,示例:

http://img.mukewang.com/climg/5e8fdd6609a59d4615980516.jpg

同学可以测试下,接着完成这个编程题,祝学习愉快~

0

0 学习 · 6815 问题

查看课程