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

相关文章
|
7月前
|
定位技术
百度地图缩放级别与比例尺的关系
百度地图缩放级别与比例尺的关系
559 0
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
972 0
|
定位技术
百度地图开发:批量增加折线、多边形覆盖物的封装函数
百度地图开发:批量增加折线、多边形覆盖物的封装函数
96 0
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
305 0
|
定位技术
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
327 0
|
定位技术 C# Windows
C#编程学习(05):使用webbroswer控件显示地图并标注点位坐标
C#编程学习(05):使用webbroswer控件显示地图并标注点位坐标
|
搜索推荐 数据可视化 JavaScript
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
223 1
|
定位技术
Echarts实战案例代码(39):地理坐标整体地图背景色渐变效果和字体随地图缩放的解决方案
Echarts实战案例代码(39):地理坐标整体地图背景色渐变效果和字体随地图缩放的解决方案
329 0
|
定位技术
echarts. registerMap选项specialAreas将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看
echarts. registerMap选项specialAreas将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看
164 0
|
JavaScript 前端开发 定位技术
地图开发实战案例:高德地图弧线连接线标注
地图开发实战案例:高德地图弧线连接线标注
157 0

热门文章

最新文章