百度地图开发:调用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!

相关文章
|
前端开发
webpack如何设置devServer启动项目为https协议
webpack如何设置devServer启动项目为https协议
1843 0
|
前端开发 API Python
使用 tkintertools 模块显示简单的 3D 效果
如何使用 Python 快速又简单地显示 3D 效果呢?使用 tkintertools 模块,轻松地做到这一点!(本文适用于 tkintertools-v2.6.6)
601 1
|
12月前
|
前端开发 定位技术 API
二、前端高德地图、渲染标记(Marker)引入自定义icon,手动设置zoom
文章介绍了如何在前端使用高德地图API渲染标记(Marker),并引入自定义图标,同时展示了如何手动设置地图的缩放级别。
1534 1
|
12月前
|
Java Spring
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
本文介绍了Spring Boot中静态资源的访问位置、如何进行静态资源访问测试、自定义静态资源路径和静态资源请求映射,以及如何处理自定义静态资源映射对index页面访问的影响。提供了两种解决方案:取消自定义静态资源映射或编写Controller来截获index.html的请求并重定向。
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
|
11月前
|
前端开发 JavaScript 开发者
通义灵码:前端开发的效率助推器
作为一名前端开发者,我近期开始使用通义灵码辅助开发,显著提升了编码效率和质量。在编写复杂交互逻辑或应用新技术框架时,通义灵码能快速提供代码框架和建议,帮助我快速搭建页面架构并解决技术难题,使项目进展更加顺利。其简洁友好的界面和强大的功能,让我的开发工作变得更加高效和自信。
|
SQL 存储 关系型数据库
COALESCE 函数:SQL中的空值处理利器
【8月更文挑战第31天】
5810 0
|
11月前
|
机器学习/深度学习 计算机视觉 Python
模型预测笔记(三):通过交叉验证网格搜索机器学习的最优参数
本文介绍了网格搜索(Grid Search)在机器学习中用于优化模型超参数的方法,包括定义超参数范围、创建参数网格、选择评估指标、构建模型和交叉验证策略、执行网格搜索、选择最佳超参数组合,并使用这些参数重新训练模型。文中还讨论了GridSearchCV的参数和不同机器学习问题适用的评分指标。最后提供了使用决策树分类器进行网格搜索的Python代码示例。
905 1
|
机器学习/深度学习 算法 数据安全/隐私保护
两万多字诠释python经典基础算法之100题【内含思路、程序和答案】【python小白必备】
本文为最最基础的python基础算法题目、思路和答案,适合python初学者使用,可以当作python入门算法工具书,虽然不具有高深的算法,但是都是企业级算法用的频率最多的,这也是学好高级算法的必经之路。希望收藏、关注、点赞哦。
|
前端开发 JavaScript 开发者
React 的 ES6 语法与 ES5 相比有何不同?
【8月更文挑战第30天】
194 5
|
11月前
|
IDE 开发工具 Python
Python自动化操作word--批量替换word文档中的文字
Python自动化操作word--批量替换word文档中的文字
619 0