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

相关文章
|
安全 网络安全 数据安全/隐私保护
DMZ是什么?它是如何工作的?
DMZ,中文通常译为“隔离区”或“非军事化区”,是在网络安全领域中用来描述一个逻辑或物理的网络子段,这个子段通常位于组织的内部网络和外部网络(如互联网)之间。DMZ的主要目的是提供一个受限制且受控的环境,允许对外提供服务的服务器放置在此区域,从而在一定程度上保护内部网络的安全。
3392 1
|
5月前
|
前端开发 JavaScript IDE
WebStorm 2025.1 最新版本发布安装+激活+中文设置全流程教程
WebStorm 2025.1 是 JetBrains 推出的专业前端 IDE,全面支持 JS/TS 及主流框架,智能补全、重构与调试能力升级,新增 AI 辅助编码、性能分析工具,大幅提升开发效率与代码质量。
1138 1
|
资源调度 JavaScript 前端开发
vue2_二次封装a-upload组件,自定义上传预览
vue2_二次封装a-upload组件,自定义上传预览
1483 0
|
Java 数据库 开发者
一文带你掌握Spring事务核心:TransactionDefinition详解!
TransactionDefinition是Spring框架中用于定义事务属性的核心接口。在Spring的事务管理中,这个接口扮演着至关重要的角色,它允许开发者定制事务的各种属性,如隔离级别、传播行为、超时时间以及是否只读。
455 2
一文带你掌握Spring事务核心:TransactionDefinition详解!
|
资源调度 Java 关系型数据库
实时计算 Flink版产品使用问题之如何解决内存占用过大的问题
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
|
安全 应用服务中间件 网络安全
简单比较 http https http2,我们要如何把http升级为https
【9月更文挑战第13天】本文对比了HTTP、HTTPS和HTTP/2的特点与适用场景。HTTP以明文传输,适合低安全要求的环境;HTTPS通过SSL/TLS加密,适用于电子商务等安全要求高的场景;HTTP/2采用二进制格式和多路复用,适合高性能Web应用。文章还详细介绍了将HTTP升级为HTTPS的步骤,包括申请和安装SSL证书、配置Web服务器、重定向HTTP流量到HTTPS以及测试HTTPS功能。升级到HTTPS可提高数据安全性和用户信任度。
1678 13
|
算法 JavaScript 前端开发
对称加密算法解析:DES、AES及其在`pycryptodome` 和 `crypto-js` 模块中的应用
对称加密算法解析:DES、AES及其在`pycryptodome` 和 `crypto-js` 模块中的应用
742 1
|
关系型数据库 MySQL Linux
在Linux中,如何启动、停止、重启一个系统服务?
在Linux中,如何启动、停止、重启一个系统服务?
|
JavaScript 前端开发
完美解决 报错 Vue Invalid prop: type check failed for prop “min“. Expected Number with value 1,
完美解决 报错 Vue Invalid prop: type check failed for prop “min“. Expected Number with value 1,
984 1
|
Kubernetes Linux 对象存储
Linux安装Minio
Linux安装Minio
1182 0

热门文章

最新文章