根据半径范围进行筛选数据，请记住将jQuery引入
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>半径筛选</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<style type="text/css">
#tip {
width: 60%;
height: 30px;
background-color: #fff;
border: 1px solid #969696;
position: absolute;
font-size: 12px;
right: 10px;
bottom: 20px;
border-radius: 3px;
line-height: 30px;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=您的key"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="tip">
<select id="radius" name="radius"
style="width: 20%; height: 20px;">
<option value="">请选择</option>
<option value="10000">10公里</option>
<option value="20000">20公里</option>
<option value="30000">30公里</option>
<option value="40000">40公里</option>
</select>
</div>
<script>
var map = new AMap.Map('container', {
resizeEnable: true,
center: [104.065747, 30.657447],
zoom: 14
});
var radius = "5000";
var circle;
$(document).ready(function () {
$("#radius").bind("change",function(){
if($(this).val()!=null || $(this).val()!=""){
radius = document.getElementById("radius").value;
circle.setMap(null);//将上一个方法清空
circle = new AMap.Circle({
center: new AMap.LngLat("104.065618", "30.656621"),// 圆心位置
radius: radius, //半径
strokeColor: "#F33", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 2, //线粗细度
fillColor: "#cccccc", //填充颜色
fillOpacity: 0.2//填充透明度
});
circle.setMap(map);
}
});
circle = new AMap.Circle({
center: new AMap.LngLat("104.065618", "30.656621"),// 圆心位置
radius: radius, //半径
strokeColor: "#F33", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 2, //线粗细度
fillColor: "#cccccc", //填充颜色
fillOpacity: 0.2//填充透明度
});
circle.setMap(map);
});
/*
*
*
//窗体信息
var s = [];
s.push("<b>名称：川A12345</b><br/>");
s.push("地址：成都市武侯区<br/>");
s.push("电话：123456<br/>");
s.push("类型：9.6米");*/
var s =new Array();
s[0]="标题1";
s[1]="标题2"
s[2]="标题3"
s[3]="标题4"
var markers = [{
content: '<a onclick="a()">'+s[0]+'</a>',
icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
position: [104.042865, 30.662378]
}, {
content: '<a onclick="a()">'+s[1]+'</a>',
icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b2.png',
position: [104.055445, 30.657722]
}, {
content: '<a onclick="a()">'+s[2]+'</a>',
icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b3.png',
position: [104.086775, 30.656938]
}, {
content: '<a onclick="a()">'+s[3]+'</a>',
icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b4.png',
position: [104.069775, 30.656538]
}];
markers.forEach(function(marker) {
var _marker=new AMap.Marker({
map: map,
icon: marker.icon,
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(-12, -36),
clickable : true, //是否可点击
});
AMap.event.addListener(_marker,'mouseover',function(e){
//信息窗体
var infoWindow = new AMap.InfoWindow({
map: map,
content: marker.content,
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(-5, -35)
});
});
/*
*高德地图占不支持多个信息窗体显示
*
//信息窗体
var infoWindow = new AMap.InfoWindow({
map: map,
content: marker.content,
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(-5, -35)
});
*/
});
function a(){
alert("点击成功");
}
</script>
</body>
</html>
如有什么疑问或者建议还请多多指教。