百度地图高级开发:LBS服务实时定位覆盖范围内关键词标注的解决方案(2)

简介: 百度地图高级开发:LBS服务实时定位覆盖范围内关键词标注的解决方案(2)


项目需求

  • 根据手机端GPS自动获取实时定位;
  • 单击定位控件,筛选当前中心点坐标范围内关键词和距离符合条件的所有标注点;
  • 关键词和半径可以自定义选择;
  • PC端通过IP获取定位的方式,对浏览器有一定的要求。


项目说明

  • 实时定位,需要https加密证书的支持,否则,F12控制台会出现黄色的警示。

getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.


  • 首次加载定位和定位控件,在实际开发中,是两次不同的事件,需要封装函数,重复使用。


项目开发

jsAPI接口引入

<script type="text/javascript"src="https://api.map.baidu.com/getscript?v=3.0&ak=3HGqGo1RHf8zsLZCMj3Fz**"></script>


构建地图容器

<div class="radius">
    <select name="keyword" id="keyword">
        <option value="餐馆">餐馆</option>
        <option value="医院">医院</option>
        <option value="酒店">酒店</option>
        <option value="学校">学校</option>
    </select>
    <select name="radius" id="radius">
        <option value="3000">3km</option>
        <option value="5000">5km</option>
        <option value="10000">10km</option>
    </select>
</div>
<div id="lock_map"></div>


CSS样式表

    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        #lock_map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .radius {
            position: absolute;
            z-index: 9999;
            right: 10px;
        }


初始化地图

    var map = new BMap.Map("lock_map");
    var point = new BMap.Point(117.016415, 36.619618);
    map.centerAndZoom(point, 12);
    map.enableScrollWheelZoom(true);
    // 添加定位控件;
    var geolocationControl = new BMap.GeolocationControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT
    });


定位控件事件监听

    geolocationControl.addEventListener("locationSuccess", function (e) {
        getGEO();
    });
    map.addControl(geolocationControl);


定位函数

    //定位;
    function getGEO(){
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                map.clearOverlays();
                //返回当前中心点;
                map.panTo(r.point);
                map.centerAndZoom(r.point, 14);
                //获取半径;
                var radiusLength = $("#radius").val();
                var keyword = $("#keyword").val();
                console.log(keyword)
                var x = r.point.lng;
                var y = r.point.lat;
                var newPoint = new BMap.Point(x, y);
                addMaker(newPoint);//标注中心;
                addCircle(newPoint, radiusLength);//范围;
                searchMaker(newPoint, keyword, x, y);//周边标注;
            } else {
                alert('failed' + this.getStatus());
            }
        }, function (error) {
            console.log(error);
        }, {
            enableHighAccuracy: true,
            timeout: 1000,
            maximumAge: 0
        });
    }


添加标注

    //添加标注;
    function addMaker(point) {
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
    }


添加圆形覆盖物

    //添加圆形覆盖物;
    function addCircle(newPoint, radius) {
        var circle = new BMap.Circle(newPoint, radius, {
            fillColor: 'blue',
            fillOpacity: 0.3,
            strokeColor: 'blue',
            strokeWeight: 1,
            strokeOpacity: 0.5
        });
        map.addOverlay(circle);
    }


搜索周边坐标

    //搜索周边坐标;
    function searchMaker(newPoint, keyword, x, y) {
        //后台数据库,返回范围内的数据经纬度即可;
        var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
        local.searchNearby(keyword, newPoint, 1000);
        console.log("中心经纬度:" + x + "," + y);
    }


@lockdata.cn

相关文章
|
数据可视化 定位技术 API
百度地图开发:海量点、测距以及定位聚合功能
百度地图开发:海量点、测距以及定位聚合功能
331 0
|
移动开发 小程序 JavaScript
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
263 1
|
10月前
|
Ubuntu 数据可视化 Shell
一键访问多功能数据解决方案:如何轻松构建和管理APITable智能多维表格
一键访问多功能数据解决方案:如何轻松构建和管理APITable智能多维表格
144 0
|
搜索推荐 数据可视化 JavaScript
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
254 1
|
JavaScript 数据可视化 搜索推荐
高德地图开发实战案例:使用Loca数据源展示海量点标注(海量点、自定义分类图标、聚合、信息提示、3D控件)
高德地图开发实战案例:使用Loca数据源展示海量点标注(海量点、自定义分类图标、聚合、信息提示、3D控件)
770 0
|
前端开发 定位技术
地图开发实战案例:高德地图的标注、信息窗口的实战实例
地图开发实战案例:高德地图的标注、信息窗口的实战实例
199 0
|
搜索推荐 JavaScript 数据可视化
数据可视化大屏高德地图javascript webAPI开发的智慧治安物联网管理系统实战解析(web GIS、3D视图、个性化地图、标注、涟漪动画、自定义弹窗、3D控件)
数据可视化大屏高德地图javascript webAPI开发的智慧治安物联网管理系统实战解析(web GIS、3D视图、个性化地图、标注、涟漪动画、自定义弹窗、3D控件)
592 0
|
小程序 定位技术
记录一款基于地图标注点展示的微信小程序开发过程纪要
记录整理一款基于地图的微信小程序开发过程,主要涉及标注点展示,可视范围内标注点动态更新,标注点自定义气泡,气泡点击及气泡内容实时更新
161 0
|
监控 搜索推荐 数据可视化
漏刻有时垃圾分类回收数据可视化大屏监控源代码百度地图标注及地图个性化处理方案
漏刻有时垃圾分类回收数据可视化大屏监控源代码百度地图标注及地图个性化处理方案
127 0
|
数据采集 数据可视化 自动驾驶
WEB 三维引擎在高精地图数据生产的探索和实践
高精地图(High Definition Map)作为自动驾驶安全性不可或缺的一部分,能有效强化自动驾驶的感知能力和决策能力,提升自动驾驶的等级。对于自动驾驶来说,高精地图主要是给机器用的,但是在制作和分析过程中依然需要人能够理解。本文将为大家简单介绍下,在过去的一段时间里高德高精地图业务团队,在WEB三维引擎技术方面的一些探索和实践,如何让复杂抽象的地理数据呈现在人们面前,满足其业务编辑和分析的诉求。
911 0
WEB 三维引擎在高精地图数据生产的探索和实践