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

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


需求说明

  1. 1.基于百度地图jsAPI开发;
  2. 2.点击地图,以该点为中心,搜索周边范围所有的标注信息;


项目分解

  1. 1.使用map.addEventListener监听事件;
  2. 2.增加中心点标注;
  3. 3.增加圆形覆盖物;
  4. 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

相关文章
|
4月前
|
定位技术 开发者
百度地图开发 —— 获取百度地图开发的 AK
百度地图开发 —— 获取百度地图开发的 AK
340 3
|
4月前
|
JavaScript 定位技术
vue-baidu-map 绘制行政区划的轮廓,添加行政区划名称(含给覆盖物添加点击事件)——vue 百度地图开发
vue-baidu-map 绘制行政区划的轮廓,添加行政区划名称(含给覆盖物添加点击事件)——vue 百度地图开发
256 1
|
4月前
|
JavaScript 定位技术
vue-baidu-map 百度地图检索、获取坐标
vue-baidu-map 百度地图检索、获取坐标
62 1
|
4月前
|
JavaScript 定位技术
vue 百度地图开发【教程】3. 自定义百度地图主题
vue 百度地图开发【教程】3. 自定义百度地图主题
165 0
|
4月前
|
JavaScript 定位技术
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
414 0
|
6月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
6月前
|
存储 Kubernetes 容器
百度搜索:蓝易云【Kubernetes使用helm部署NFS Provisioner】
现在,你已经成功使用Helm部署了NFS Provisioner,并且可以在Kubernetes中创建使用NFS存储的PersistentVolumeClaim。
207 10
|
6月前
百度搜索:蓝易云【什么是HTTP长轮询?】
现在,HTTP长轮询逐渐被WebSocket等更高效的实时通信技术所替代,但了解HTTP长轮询仍然有助于理解实时数据推送的基本原理。
129 9
|
6月前
|
移动开发 Shell Linux
百度搜索:蓝易云【Shell错误:/bin/bash^M: bad interpreter: No such file or directory】
将 `your_script.sh`替换为你的脚本文件名。运行此命令后,脚本文件的换行符将被转换为Linux格式,然后就可以在Linux系统上正常执行脚本了。
74 8
|
6月前
百度搜索:蓝易云【ipmitool配置BMC的ip】
以上操作将配置BMC的IP地址为新的值。请注意,操作BMC需要谨慎,确保你对服务器有足够的权限,并且仔细检查新的IP地址、子网掩码和默认网关,以免导致服务器网络失联。
103 7