百度地图高级开发:获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案(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

相关文章
|
9月前
|
移动开发 JavaScript 前端开发
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
147 0
|
9月前
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
184 0
|
9月前
|
定位技术 API 容器
百度地图API开发:停车场分布标注和检索静态版
百度地图API开发:停车场分布标注和检索静态版
92 0
|
5月前
|
存储 关系型数据库 MySQL
百度搜索:蓝易云【MySQL数据同步到ES的4种解决方案】
以上这些解决方案都可以实现MySQL数据到ES的同步,您可以根据实际需求和技术栈选择合适的方案。请注意,每种方案都有其优缺点和适用场景,因此在选择之前需要对其进行评估和测试,以确保其满足您的需求。
59 0
|
6月前
|
API 数据安全/隐私保护
百度搜索:蓝易云【常见HTTP状态码的错误有哪些?对应的解决方案是什么?】
以上是一些常见的HTTP状态码错误及相应的解决方案。在实际应用中,还可能遇到其他状态码错误,根据具体情况进行排查和解决。重要的是理解每个错误的含义,并采取适当的措施来解决问题。
28 3
|
9月前
|
搜索推荐 数据可视化 JavaScript
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
133 1
|
9月前
|
数据可视化 前端开发 安全
漏刻有时地理信息可视化百度地图标注系统本地Excel版说明书
漏刻有时地理信息可视化百度地图标注系统本地Excel版说明书
63 1
|
9月前
|
前端开发 定位技术 容器
百度地图高级开发:上滑推拉菜单CSS解决方案
百度地图高级开发:上滑推拉菜单CSS解决方案
50 0
|
9月前
|
前端开发 定位技术 数据安全/隐私保护
百度地图高级开发:LBS服务实时定位覆盖范围内关键词标注的解决方案(2)
百度地图高级开发:LBS服务实时定位覆盖范围内关键词标注的解决方案(2)
60 0
|
2月前
|
存储 Kubernetes 容器
百度搜索:蓝易云【Kubernetes使用helm部署NFS Provisioner】
现在,你已经成功使用Helm部署了NFS Provisioner,并且可以在Kubernetes中创建使用NFS存储的PersistentVolumeClaim。
44 10