工具框右下角显示所在省/直辖市，如何和搜索城市联系在一起？（按确定后，右下角也显示所在省/直辖市）
来源：3-12 自由编程
慕侠9181480
2019-08-27 17:55:46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=5247135ee7e3e0eb2dcd168a621c6737"></script>
<style>
*{padding: 0; margin: 0; list-style-type: none;}
#container {width:100vw; height: 100vh;}
#whiteBox{position: relative; width: 30vw; height: 60vh; background-color: #fff; position: absolute; top: 8px; left: 8px; box-shadow: 0 0 5px black}
.btn{
width: 60px;
height: 30px;
outline: none;
border: none;
background-color: #246AFF;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: 0.5s;
}
.btn:hover{
box-shadow: 0 0 3px black;
}
.setText{
height: 28px;
}
#whiteBox h2{
margin-top: 20px;
text-align: center;
}
#whiteBox div:nth-of-type(1){
margin: 20px 0 12px 51px;
}
#whiteBox div:nth-of-type(2){
margin-left: 20px;
}
#whiteBox div:nth-of-type(3){
text-align: center;
margin-top: 10px;
}
#setLimit{
width: 120px
}
#whiteBox div:nth-of-type(4){
position: absolute;
bottom: 3px; right: 5px;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="whiteBox">
<h2>工具栏</h2>
<div>搜索城市 <input type="text" id=cityText class="setText"> <button id="cityBtn" class="btn">确定</button></div>
<div>设置显示级别 <input type="text" id=zoomText class="setText"> <button id="zoomBtn" class="btn">确定</button></div>
<div><input type="button" id="setLimit" value="已解除范围限制"></div>
<div>当前所在省/直辖市：<span id="cityNode"></span></div>
</div>
<script>
var myMap = new AMap.Map("container", {
zoom: 10, //初始地图层级
center: [116.567542,39.997639, 116.22422,39.813285] //初始地图中心点
});
//获取当前城市
myMap.getCity(function(info){
cityNode.innerHTML = info.province;
})
//搜索城市
cityBtn.onclick = function(){
cityNode.innerHTML = cityText.value
myMap.setCity(cityText.value)
}
//设置地图层级
zoomBtn.onclick = function(){
myMap.setZoom(zoomText.value);
}
//移动地图显示当前省/直辖市
myMap.on("moveend", function(){
myMap.getCity(function(info){
cityNode.innerHTML = info.province;
})
})
var myBounds = myMap.getBounds(),
setLimitBln = true;
setLimit.onclick = function(){
setLimitBln = !setLimitBln;
if(setLimitBln == false){
this.value = '限制显示范围';
myMap.setLimitBounds(myBounds);
}else{
this.value = '已解除范围限制';
myMap.clearLimitBounds();
}
}
myMap.on("click", function(e){
myMap.setCenter([e.lnglat.lng, e.lnglat.lat])
})
</script>
</body>
</html>
1回答
-
你好同学，老师这边测试，右下角的省/直辖市可以跟着搜索的变化为变化，如下：
同学自己看一下代码，已经实现了功能。如果不是想问这里。可以再重新描述一下你的问题，以便老师准确的为你解答。
祝学习愉快！望采纳。
0
相似问题