需求说明
- 1.基于百度地图jsAPI开发;
- 2.点击地图,以该点为中心,搜索周边范围所有的标注信息;
项目分解
- 1.使用map.addEventListener监听事件;
- 2.增加中心点标注;
- 3.增加圆形覆盖物;
- 4.根据中心点的坐标信息和圆形覆盖物半径信息,传入后台,比对是否在该范围内,生成JSON数据,异步加载并生成标注。
引入百度API
建议采用该方式,避免F12控制台错误信息提示。
<script type="text/javascript" src="//api.map.baidu.com/getscript?v=3.0&ak=3HGqGo1RHf8zsLZCM**"></script>
初始化地图
var map = new BMap.Map("lock_map"); var point = new BMap.Point(117.016415, 36.619618); map.centerAndZoom(point, 12); map.enableScrollWheelZoom(true); map.addEventListener('click', function (e) { //清除覆盖物; map.clearOverlays(); //console.log(e); //创建新的坐标中心; var x = e.point.lng; var y = e.point.lat; var newPoint = new BMap.Point(x, y); addMaker(newPoint);//标注中心; addCircle(newPoint);//范围; searchMaker(x, y);//周边标注; })
封装函数
标注覆盖物
//添加标注; function addMaker(point) { var marker = new BMap.Marker(point); map.addOverlay(marker); }
圆形覆盖物
//添加圆形覆盖物; function addCircle(newPoint) { var circle = new BMap.Circle(newPoint, 10000, { strokeColor: 'blue', strokeWeight: 1, strokeOpacity: 0.5 }); map.addOverlay(circle); }
范围内标注搜索
//搜索周边坐标; function searchMaker(x, y) { //后台数据库,返回范围内的数据经纬度即可; console.log("中心经纬度:" + x + "," + y); }
@lockdata.cn