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

相关文章
|
6月前
|
移动开发 前端开发 API
期末测试——H5方式练习题
期末测试——H5方式练习题
49 0
|
6月前
|
测试技术
证实偏差在软件测试领域的应用
证实偏差在软件测试领域的应用
|
11月前
|
JavaScript 定位技术 PHP
【百度地图】——利用三级联动加载百度地图
【百度地图】——利用三级联动加载百度地图
|
3月前
|
移动开发 开发框架 小程序
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
|
4月前
|
定位技术 开发者
百度地图开发 —— 获取百度地图开发的 AK
百度地图开发 —— 获取百度地图开发的 AK
329 3
|
4月前
|
JavaScript 定位技术
vue 百度地图开发【教程】3. 自定义百度地图主题
vue 百度地图开发【教程】3. 自定义百度地图主题
164 0
|
4月前
|
JavaScript 定位技术
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
403 0
|
6月前
|
JavaScript 搜索推荐 定位技术
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
|
6月前
|
JavaScript 前端开发 定位技术
GPS坐标显示在百度地图上(Qt+百度地图)
GPS坐标显示在百度地图上(Qt+百度地图)
83 0
|
6月前
|
移动开发 API 开发者
标准详情API接口h5优惠券到手价信息采集
为了提高用户体验和满足用户需求,开放了其详情API接口,使得第三方开发者可以方便地访问和利用这些商品信息 淘宝详情API接口是淘宝开放平台提供的一套接口,它允许第三方开发者通过编程方式获取淘宝商品详情信息。这些信息包括但不限于商品标题、价格、销量、评价等。开发者可以使用这些信息为自己的应用程序提供支持,从而为用户提供更优质的服务。

热门文章

最新文章