报错,未搜索到有效结果

来源：4-5 地图搜索与poi结合（2）

慕言_7946275

2019-10-28 12:50:39

<!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=77d1feb2b54e20877ab4eee49c6ae1dc&plugin=AMap.Autocomplete"></script>
<style type="text/css">
*{
margin: 0;
padding:0;
list-style: none;
}
#container{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#setZoomNode{
width: 300px;
height: 30px;
position: absolute;
z-index: 99;
right: 20px;
top: 20px;
border:1px solid black;
box-shadow: 0 0 5px black;
background: white;
}
#setCenterNode,#setCityNode,#setBoundsNode,#setLimitBoundsNode,#setSearchNode{
width: 180px;
height: 30px;
position: absolute;
z-index: 99;
right: 20px;
top: 20px;
border:1px solid black;
box-shadow: 0 0 5px black;
background: white;
text-align: center;
}
#setCityNode{
right: 220px;
width: 180px;
}
#setBoundsNode{
top: 60px;
height: 80px;
width: 240px;
font-size: 12px;
line-height: 25px;
text-align: left;
}
#setLimitBoundsNode{
right: 20px;
width: 240px;
height: 60px;
top:150px;
}
#setSearchNode{
/*height: 250px;*/
width:240px;
top:270px;
text-align: left;

}
#node li{
cursor: pointer;
}

.poi-img{
display: none;
}

#setInputNode{
position: absolute;
width: 240px;
height: 30px;
top:240px;
right:22px;

}


</style> 
</head>
<body>
<div id="container"></div>

<div id="setCenterNode">

</div>

<div id="setCityNode">
<input type="text" id="cityNode" placeholder="请输入行政区" style="width:120px;text-align:center">
<button id="btn">确定</button>
</div>

<div id="setBoundsNode">
<div>地图右上角坐标:<span id="ne"></span></div>
<div>地图左下角坐标:<span id="sw"></span></div>
<div>目前鼠标的经纬度是:<span id="xyNode"></span></div>
</div>

<div id="setInputNode">
<input type="text" id="searchIpt">
<button id="searchBtn">搜索</button>
</div>

<div id="setSearchNode">
<!-- <input type="text" id="searchText">
<ul id="node"></ul> -->
</div>

<div id="setLimitBoundsNode">
<input type="text" id="xNode" style="width:180px;text-align:center" placeholder="限制地图的显示范围xNode">
<button id="btn2">限制</button>
<input type="text" id="yNode" style="width:180px;text-align:center" placeholder="限制地图的显示范围yNode">
<button id="btn3">解除</button>
</div>

<script type="text/javascript">
var map=new AMap.Map('container',{
zoom:11,  //初始的地图级别
center:[120,30] //初始化地图的中心点
});

new AMap.Autocomplete({
input:'searchText'
});

AMap.service(['AMap.PlaceSearch'],function(){
searchBtn.onclick=function(){
new AMap.PlaceSearch({
city:'027',
pageSize:5,
pageIndex:1,
map:map,
citylimit:true,
panel:'setSearchNode'
}).search('searchIpt.value');

}
});


//打印当前地图级别和中心点位置
// console.log(map.getZoom());
// console.log(map.getCenter().toString());

//移动鼠标,地图中心点改变
// map.on('moveend',function(){
//  console.log(map.getZoom());
//  console.log(map.getCenter().toString());
// })

//双击 地图级别改变
// map.on('zoomend',function(){
//  console.log(map.getZoom());
//  console.log(map.getCenter().toString());
// })

//手动设置地图级别
// setTimeout(function(){
//  map.setZoom(15);
// },5000)

//通过事件设置级别
// btn.onclick=function(){
//  map.setZoom(zoomVal.value);
// };

// 手动设置地图的中心点
// setTimeout(function(){
//  map.setCenter([120.21,30]);
// },5000)

//通过事件设置中心点位置
// btn2.onclick=function(){
//  map.setCenter([xNode.value,yNode.value]);
// };

//中心点和级别一起设定
// setTimeout(function(){
//  map.setZoomAndCenter(12,[120,30.5]);
// },5000)

// 获取当前行政区
map.getCity(function(info){
console.log(info);
setCenterNode.innerHTML=info.province+','+info.city+','+info.district;
});

//移动获取当前行政区
map.on('moveend',function(){
map.getCity(function(info){
console.log(info);
setCenterNode.innerHTML=info.province+','+info.city+','+info.district;
});
})

//设置当前的行政区
// map.setCity('天津市');


//通过事件给予地图当前行政区
btn.onclick=function(){
map.setCity(cityNode.value);
}

//获取地图的范围
// console.log(map.getBounds());
// ne.innerHTML=map.getBounds().northeast.toString();
// sw.innerHTML=map.getBounds().southwest.toString();

//通过鼠标放大层级事件显示地图坐标范围
map.on('zoomend',function(){
ne.innerHTML=map.getBounds().northeast.toString();
sw.innerHTML=map.getBounds().southwest.toString();

});

//设置地图的显示范围
// var myBounds=new AMap.Bounds([],[]);
// map.setBounds(myBounds);

//限制地图的显示范围(以当前范围)
var bounds=map.getBounds()
map.setLimitBounds(bounds);
// bounds.northeast.R=118;

//清除限制地图范围
map.clearLimitBounds(bounds);

//通过事件设定地图显示范围
btn2.onclick=function(){
var bounds=map.getBounds()
bounds.northeast.R=Number(xNode.value);
bounds.southwest.R=Number(yNode.value);
console.log([xNode.value,yNode.value]);
map.setLimitBounds(bounds);
}
btn3.onclick=function(){
map.clearLimitBounds();
}


//地图的平移
setTimeout(function(){
map.panBy(50,100);
},3000);

//左上一直随机平移
// setInterval(function(){
//  map.panBy(300*Math.random(),400*Math.random());
// },3000);

//右下一直随机平移
// setInterval(function(){
//  map.panBy(600*Math.random()-300,800*Math.random()-400);
// },3000);

//左上为正,右下为负


//平移到这个坐标点
// setTimeout(function(){
//  map.panTo([]);
// },3000);

//获取鼠标的经纬度
map.on('click',function(e){
// console.log(e);
xyNode.innerHTML=e.lnglat.lng+','+e.lnglat.lat;
map.setCenter([e.lnglat.lng,e.lnglat.lat]);
});

//设置地图的鼠标样式
map.setDefaultCursor('pointer');
</script>
</body>
</html>

写回答

1回答