根据半径范围进行筛选数据,请记住将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>
如有什么疑问或者建议还请多多指教。