关于本节练习的代码的再次提问
来源：3-12 自由编程
迷失的小麦
2020-02-25 11:03:38
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=1aab89cf5b7b7377fa90355dbc27c093"></script>
<style>
*{margin: 0;padding: 0;}
input{border: none;outline: none;}
.clearfixed {zoom: 1;}
.clearfixed::after {display: block;clear: both;content: "";}
#container{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
.box{width: 350px;height: 350px;box-shadow: 0 0 5px 5px #000;background-color: #fff;position: fixed;left: 20px;top: 20px;z-index: 2;}
.title{font-weight: bold;text-align: center;font-size: 18px;margin-top: 10px;width: 100%;}
.search,.setZoom{font-size: 12px;width: 260px;height: 22px;margin: 20px auto;}
.search-title,.setZoom-title{width: 80px;float: left;line-height: 22px;text-align: right;}
.search-text,.setZoom-text{width: 80px;height: 20px;line-height: 20px;margin-left: 10px;float: left;padding: 0 10px;border: 1px solid #ccc;}
.search-btn,.setZoom-btn{width: 40px;height: 22px;line-height: 20px;text-align: center;margin-left: 10px;background-color: blue;float: left;color: white;}
.clear{display: block;width: 100px;height: 22px;text-align: center;margin: 0 auto;background-color: blue;color: white;}
.city-box{font-size: 12px;position: absolute;right: 20px;bottom: 20px;}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="title">工具栏</div>
<div class="search clearfixed">
<div class="search-title">搜索城市</div>
<input type="text" class="search-text">
<input type="button" value="确定" class="search-btn">
</div>
<div class="setZoom clearfixed">
<div class="setZoom-title">设置显示级别</div>
<input type="text" class="setZoom-text">
<input type="button" value="确定" class="setZoom-btn">
</div>
<input type="button" value="解除范围限制" class="clear">
<div class="city-box">当前所在省/直辖市：<span class="city">北京市</span></div>
</div>
</div>
<script>
var map=new AMap.Map('container');
var myBounds = new AMap.Bounds([116.22422,39.813285],[116.567542,39.997639]);
map.setLimitBounds(map.setBounds(myBounds));
//搜索城市
var search=document.querySelector('.search-btn'),
searchText=document.querySelector('.search-text'),
city=document.querySelector('.city');
search.onclick=function(){
map.setCity(searchText.value);
var str=searchText.value;
if(str.indexOf("市")==-1){
str=str.replace(str,str+"市");
}
city.innerHTML=str;
//city.innerHTML=searchText.value;
};
//设置级别
var setZoom=document.querySelector('.setZoom-btn'),
setZoomText=document.querySelector('.setZoom-text');
setZoom.onclick=function(){
map.setZoom(Number(setZoomText.value));
};
//为范围限制的按钮绑定点击事件
var clear=document.querySelector('.clear'),
isBounds=true;
clear.onclick=function(){
if(isBounds){
map.clearLimitBounds();
clear.value='限制显示范围';
isBounds=false;
}else{
map.setLimitBounds(map.getBounds());
clear.value='解除范围限制';
isBounds=true;
}
};
//把当前点击时的经纬度设置成中心点
map.on('click',function(e){
map.setCenter([e.lnglat.lng,e.lnglat.lat]);
});
//工具栏的右下角显示当前省/直辖市
map.on('moveend zoomend',function(){
map.getCity(function(info){
city.innerHTML = info.province;
});
});
</script>
</body>
</html>搜索框输入地址确实能跳转，而且文字也相应改变。但是当鼠标拖动时或改变层级时，文字没有相应改变（我已经解除限制区域了），如图所示，在石家庄，但是文字依然是南京
2.请老师帮我看看我自己写的对不对（search.onclick中的）
var str=searchText.value;
if(str.indexOf("市")==-1){
str=str.replace(str,str+"市");
}
city.innerHTML=str;写回答
1回答
-
同学你好，问题解答如下：
1、on不能同时绑定多个事件，但是可以一个一个的绑定，否则不会执行
修改之后地区文字就可以跟着更改了。
2、自己写的代码是可以的，但是这里不需要添加判断。这里通过setCity方法设置了数据，下面已经通过getCity方法获取并设置修改了文字，会跟着改变的。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题