使用浏览器自带定位功能初始化百度地图

最新推荐文章于 2023-10-13 11:15:56 发布

流转往复

最新推荐文章于 2023-10-13 11:15:56 发布

阅读量1.1k

点赞数

分类专栏：地图文章标签：百度地图浏览器 gps api

本文链接：https://blog.csdn.net/qq_18837459/article/details/76614611

版权

地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

百度地图自带了定位的api，但是这个定位的精确度确实太低了。
所以我就用浏览器自带的GPS功能获取GPS坐标，再通过百度地图坐标转换的功能，初始化百度地图。

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body,
            html,
            #allmap {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0;
                font-family: "微软雅黑";
            }
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=这里替换成你自己的"></script>
        <title>GPS转百度</title>
    </head>

    <body>
        <div id="allmap"></div>
    </body>

</html>
<script type="text/javascript">
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError); // HTML5获取GPS设备地理位置信息
    } else {
        document.getElementById("allmap").innerHTML = "Geolocation is not supported by this browser.";
    }

    function showPosition(position) {
        var y = position.coords.latitude; // 获取经度
        var x = position.coords.longitude; // 获取纬度
        initMap(x, y);
    }
    // HTML5获取地理位置信息错误处理
    function showError(error) {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                document.getElementById("allmap").innerHTML = "User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                document.getElementById("allmap").innerHTML = "Location information is unavailable."
                break;
            case error.TIMEOUT:
                document.getElementById("allmap").innerHTML = "The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                document.getElementById("allmap").innerHTML = "An unknown error occurred."
                break;
        }
    }

    function initMap(x, y) {
        // 百度地图API功能
        //GPS坐标
        var ggPoint = new BMap.Point(x, y);

        //地图初始化
        var bm = new BMap.Map("allmap");
        bm.centerAndZoom(ggPoint, 15);
        bm.addControl(new BMap.NavigationControl());

        //添加gps marker和label
        var markergg = new BMap.Marker(ggPoint);
        bm.addOverlay(markergg); //添加GPS marker
        var labelgg = new BMap.Label("未转换的GPS坐标（错误）", {
            offset: new BMap.Size(20, -10)
        });
        markergg.setLabel(labelgg); //添加GPS label

        //坐标转换完之后的回调函数
        translateCallback = function(data) {
            if(data.status === 0) {
                var marker = new BMap.Marker(data.points[0]);
                bm.addOverlay(marker);
                var label = new BMap.Label("转换后的百度坐标（正确）", {
                    offset: new BMap.Size(20, -10)
                });
                marker.setLabel(label); //添加百度label
                bm.setCenter(data.points[0]);
            }
        }

        setTimeout(function() {
            var convertor = new BMap.Convertor();
            var pointArr = [];
            pointArr.push(ggPoint);
            convertor.translate(pointArr, 1, 5, translateCallback)
        }, 1000);
    }
</script>