百度地图开发:调用jsAPI实现实时定位的解决方案及常见问题

简介: 百度地图开发:调用jsAPI实现实时定位的解决方案及常见问题

项目说明

  1. 建议使用异步加载,避免F12控制台出现阻塞等提示;
  2. 电脑使用浏览器定位时,由于没有GPS,会出现无法定位(fail8)等错误提示,属于正常;
  3. 手机端时候,尤其是华为系列(安卓系统)无法正常定位时,一般是因为没有使用https安全服务协议访问的,解决方案就是配置SSL证书;
  4. 定位无法实时展示,只能通过定位配置项进行设置(见下文);
  5. 对生活区(行政街道等)的定位相对精准,但是在荒山野岭时,定位的偏差会很大(无法用具体数字来描述)


异步加载地图

  /*百度地图经纬度选择插件*/
    function map_load() {
        var load = document.createElement("script");
        load.src = "//api.map.baidu.com/api?v=3.0&ak="+bdKey+"&callback=map_init";
        document.body.appendChild(load);
    }
    window.onload = map_load;


 //初始化地图;
    var map;
    function map_init() {
        map = new BMap.Map("map", {enableMapClick: false});
        var point = new BMap.Point(centerCords.split(",")[0], centerCords.split(",")[1]);
        map.centerAndZoom(point, 13);
        map.enableScrollWheelZoom();
        // 添加定位控件;
        var geolocationControl = new BMap.GeolocationControl();
        map.addControl(geolocationControl);
        //自动定位;
        function bdGeo() {
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    //var mk = new BMap.Marker(r.point);
                    map.clearOverlays();
                    map.panTo(r.point);
                    //console.log(r.address);
                    $("#L_poi_province").val(r.address.province);
                    $("#L_poi_city").val(r.address.city);
                    $("#L_poi_county").val(r.address.district);
                    $("#L_lnglat").val(r.point.lng+","+r.point.lat);
                    var points=new BMap.Point(r.point.lng, r.point.lat);
                    //返回当前中心点;
                    map.centerAndZoom(points, 16);
                    //添加标注;
                    var marker = new BMap.Marker(points);
                    map.addOverlay(marker);
                    marker.enableDragging();
                    marker.addEventListener('dragend', function () {
                        //console.log(marker.getPosition());
                        $("#L_lnglat").val(marker.getPosition().lng+","+marker.getPosition().lat)
                    })
                }
                else {
                    alert('failed' + this.getStatus());
                }
            },function (error) {
                console.log(error);
            },{
                enableHighAccuracy: true,//是否要求高精度的地理位置信息
                timeout: 1000,//对地理位置信息的获取操作做超时限制,如果再该事件内未获取到地理位置信息,将返回错误
                maximumAge:0//设置缓存有效时间,在该时间段内,获取的地理位置信息还是设置此时间段之前的那次获得的信息,超过这段时间缓存的位置信息会被废弃
            });
        }
        bdGeo();

定位配置项

{
 enableHighAccuracy: true,//是否要求高精度的地理位置信息
timeout: 1000,//对地理位置信息的获取操作做超时限制,如果再该事件内未获取到地理位置信息,将返回错误
maximumAge:0//设置缓存有效时间,在该时间段内,获取的地理位置信息还是设置此时间段之前的那次获得的信息,超过这段时间缓存的位置信息会被废弃
}


lockdatav Done!

相关文章
|
Windows
Windows系统下快速删除node_modules
Windows系统下快速删除node_modules
1184 0
|
C# Android开发 虚拟化
C# 一分钟浅谈:MAUI 跨平台移动应用开发
.NET MAUI 是 Microsoft 推出的跨平台框架,支持 Windows、macOS、iOS 和 Android。本文从基础概念入手,探讨 MAUI 的常见问题、易错点及解决方案,并通过代码示例详细说明。涵盖平台特定代码、XAML 语法、数据绑定、性能优化和调试技巧等内容,帮助开发者更好地掌握 .NET MAUI。
1543 55
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
本文介绍了Spring Boot中静态资源的访问位置、如何进行静态资源访问测试、自定义静态资源路径和静态资源请求映射,以及如何处理自定义静态资源映射对index页面访问的影响。提供了两种解决方案:取消自定义静态资源映射或编写Controller来截获index.html的请求并重定向。
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
|
数据采集 人工智能 运维
工业巡检进入‘无人化+AI’时代:无人机智能系统的落地实践与未来
无人机智能巡检系统凭借高效性、智能化和精准性,解决了传统人工巡检效率低、成本高、漏检风险大的问题。该系统通过“空中机器人+AI分析”,实现多维度数据采集与分析,大幅提升巡检效率和准确性。广泛应用于能源、交通、工业等领域,助力运维模式升级,成为工业4.0时代基础设施运维的标配工具。
1940 19
工业巡检进入‘无人化+AI’时代:无人机智能系统的落地实践与未来
|
传感器 人工智能 数据可视化
数字孪生与环境监测:生态保护的新手段
【10月更文挑战第31天】数字孪生技术通过传感器、物联网、虚拟现实和人工智能等手段,创建物理环境的数字副本,实现实时监测、预测和优化。在环境监测中,数字孪生可应用于空气质量、水质监测和自然保护区管理等领域,提高决策效率和准确性,助力生态保护和可持续发展。
|
存储 移动开发 JavaScript
IRS应用发布之十一:应用部署发布
开发商工作台基于Docker体系和NodeJS构建发布系统,Docker镜像版本为NodeJS Long Term Support (LTS)版(node:lts),根据NodeJS升级计划自动更新默认版本。构建流程如下所示:
IRS应用发布之十一:应用部署发布
|
Kubernetes 搜索推荐 应用服务中间件
制作KubeVirt镜像
制作KubeVirt镜像
1067 13
|
安全 编译器 异构计算
现代CPU的节能技术
【10月更文挑战第2天】现代CPU的节能技术
585 3
|
开发框架 JSON 缓存
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
|
机器学习/深度学习 存储 监控
基于YOLOv8深度学习的高压输电线绝缘子缺陷智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测
基于YOLOv8深度学习的高压输电线绝缘子缺陷智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测