百度地图高级开发：获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案(1)

需求说明

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