当前位置: 首页 > 工具软件 > api-wg > 使用案例 >

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

仰英发
2023-12-01

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!

 类似资料: