百度地图开发:H5获取GPS-wg84经纬度与百度定位API的偏差测试

简介: 百度地图开发:H5获取GPS-wg84经纬度与百度定位API的偏差测试

HTML容器

<div id="map" style="width: 100%;height: 450px;"></div>
<div id="gps" style="width: 100%;height: 20px;"></div>
<div id="bd" style="width: 100%;height: 20px;"></div>
<div id="geo" style="width: 100%;height: 20px;"></div>

异步加载地图

    /*百度地图经纬度选择插件*/
    var centerCords = "113.503484,27.652063";
    function map_load() {
        var load = document.createElement("script");
        load.src = "//api.map.baidu.com/api?v=3.0&ak=11Z8uiP8kIz6AG0**&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, 15);
        map.enableScrollWheelZoom();
        // 添加定位控件;
        var geolocationControl = new BMap.GeolocationControl();
        map.addControl(geolocationControl);
        //H5定位;
        navigator.geolocation.getCurrentPosition(function (position) {
            var x = position.coords.longitude;
            var y = position.coords.latitude;
            $("#gps").html("GPS坐标:" + x + "," + y);
            var ggPoint = new BMap.Point(x, y);
            //GPS标注;
            var markergg = new BMap.Marker(ggPoint);
            map.addOverlay(markergg); //添加GPS marker
            var labelgg = new BMap.Label("GPS坐标", {offset: new BMap.Size(20, -10)});
            markergg.setLabel(labelgg); //添加GPS label
            //BD转换;
            var convertor = new BMap.Convertor();
            var pointArr = [];
            pointArr.push(ggPoint);
            convertor.translate(pointArr, 1, 5, translateCallback);
        }, function (err) {
            console.log(err.code);
            // code:返回获取位置的状态
            //0:不包括其他错误编号中的错误
            //1:用户拒绝浏览器获取位置信息
            //2:尝试获取用户信息,但失败了
            //3:设置了timeout值,获取位置超时了
        }, {
            enableHighAcuracy: true, //位置是否精确获取
            timeout: 5000,//获取位置允许的最长时间
            maximumAge: 0 //多久更新获取一次位置
        })
        //坐标转换完之后的回调函数
        translateCallback = function (data) {
            if (data.status === 0) {
                var marker = new BMap.Marker(data.points[0]);
                map.addOverlay(marker);
                $("#bd").html("百度坐标:" + data.points[0].lng + "," + data.points[0].lat);
                var label = new BMap.Label("百度坐标", {offset: new BMap.Size(20, -10)});
                marker.setLabel(label);
                map.setCenter(data.points[0]);
            }
        }
        //百度地图自动定位;
        bdGeo();
        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);
                    //alert('您的位置:' + r.point.lng + ',' + r.point.lat);
                    $("#geo").html("定位坐标:"+r.point.lng + "," + r.point.lat)
                    var marker = new BMap.Marker(points);
                    map.addOverlay(marker);
                  /*  var points = new BMap.Point(r.point.lng, r.point.lat);
                    //返回当前中心点;
                    map.centerAndZoom(points, 17);
                    //添加标注;
                    var marker = new BMap.Marker(points);
                    map.addOverlay(marker);
                    marker.enableDragging();
                    marker.addEventListener('dragend', function () {
                        //console.log(marker.getPosition().lat);
                        $("#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//设置缓存有效时间
            });
        }
    }


lockdatav Done!

相关文章
|
21小时前
|
测试技术 开发者
【专栏】测试驱动开发(TDD)与行为驱动开发(BDD)的比较与选择
【4月更文挑战第27天】本文探讨了测试驱动开发(TDD)和行为驱动开发(BDD)的核心概念与实践。TDD强调先写测试用例,通过测试推动设计,确保代码质量与可维护性。BDD侧重软件行为和业务价值,提倡使用通用语言描述行为,减少沟通障碍。选择TDD或BDD取决于项目复杂性、团队技能和业务需求。理解两者差异有助于团队做出合适的选择,发挥测试的最大价值。
|
4天前
|
API 开发者
免费邮箱API发送邮件测试调试的方法和步骤
本文介绍了使用免费邮箱API如aoksend、Mailgun、SMTP2GO发送邮件的测试调试步骤:选择合适的API,获取访问密钥,配置邮件参数,编写测试代码,调试和测试,查看发送日志,以及优化改进邮件发送功能,确保其稳定运行。
|
4天前
|
人工智能 机器人 API
【Python+微信】【企业微信开发入坑指北】3. 如何利用企业微信API给微信群推送消息
【Python+微信】【企业微信开发入坑指北】3. 如何利用企业微信API给微信群推送消息
7 0
|
4天前
|
缓存 人工智能 API
【Python+微信】【企业微信开发入坑指北】2. 如何利用企业微信API主动给用户发应用消息
【Python+微信】【企业微信开发入坑指北】2. 如何利用企业微信API主动给用户发应用消息
8 0
|
15天前
|
小程序 前端开发 API
小程序全栈开发中的RESTful API设计
【4月更文挑战第12天】本文探讨了小程序全栈开发中的RESTful API设计,旨在帮助开发者理解和掌握相关技术。RESTful API基于REST架构风格,利用HTTP协议进行数据交互,遵循URI、客户端-服务器架构、无状态通信、标准HTTP方法和资源表述等原则。在小程序开发中,通过资源建模、设计API接口、定义资源表述及实现接口,实现前后端高效分离,提升开发效率和代码质量。小程序前端利用微信API与后端交互,确保数据流通。掌握这些实践将优化小程序全栈开发。
|
25天前
|
前端开发 Java API
构建RESTful API:Java中的RESTful服务开发
【4月更文挑战第3天】本文介绍了在Java环境中构建RESTful API的重要性及方法。遵循REST原则,利用HTTP方法处理资源,实现CRUD操作。在Java中,常用框架如Spring MVC简化了RESTful服务开发,包括定义资源、设计表示层、实现CRUD、考虑安全性、文档和测试。通过Spring MVC示例展示了创建RESTful服务的步骤,强调了其在现代Web服务开发中的关键角色,有助于提升互操作性和用户体验。
构建RESTful API:Java中的RESTful服务开发
|
30天前
|
机器学习/深度学习 前端开发 API
实现以图搜货功能,淘宝API开发实战分享
实现以图搜货功能,淘宝API开发实战分享
24 0
|
1月前
|
缓存 前端开发 API
构建高效可扩展的RESTful API:后端开发的最佳实践
【2月更文挑战第30天】 在现代Web应用和服务端架构中,RESTful API已成为连接前端与后端、实现服务间通信的重要接口。本文将探讨构建一个高效且可扩展的RESTful API的关键步骤和最佳实践,包括设计原则、性能优化、安全性考虑以及错误处理机制。通过这些实践,开发者可以确保API的健壮性、易用性和未来的可维护性。
|
18天前
|
测试技术 C语言
网站压力测试工具Siege图文详解
网站压力测试工具Siege图文详解
26 0
|
1月前
|
JavaScript jenkins 测试技术
这10款性能测试工具,收藏起来,测试人的工具箱!
这10款性能测试工具,收藏起来,测试人的工具箱!