H5获取手机GPS定位_h5 gps定位-优快云博客

本文链接：https://blog.youkuaiyun.com/juncaixingchilove/article/details/126697677
话不多说直接上代
需要把代码中“你的秘钥”替换成自己的秘钥，手机浏览器直接运行html文件可以直接出效果，要是部署IIS的话，需要将网站http改为https
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>

    <title>html5实现地理位置定位</title>
</head>

<body>
    <div id="allmap"></div>
    <!-- <p> 您目前所在的区域为：</p> -->
</body>

<!--引用百度地图API文件， 您的秘钥的获取方式是注册为百度地图的开发者，创建应用-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的秘钥"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的秘钥"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的秘钥"></script>
<script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script>

<script>
    //定义一个空的位置构造函数
    function Location() {
    };
    //定义一个可以获得经纬度的方法
    Location.prototype.getLocation = function (callback) {
        var options = {
            enableHighAccuracy: true,
            maximumAge: 1000
        };
        this.callback = Object.prototype.toString.call(callback) == "[object Function]" ?
            callback :
            function (address) {
                alert(address.province + address.city);
                console.log("getLocation(callbackFunction) 可获得定位信息对象");
            };
        var thisSelf = this;
        if (navigator.geolocation) {
            //浏览器支持geolocation
            navigator.geolocation.getCurrentPosition(function (position) {
                //经度
                var longitude = position.coords.longitude;
                //纬度
                var latitude = position.coords.latitude;

                thisSelf.loadMapApi(longitude, latitude);
            }, thisSelf.onError, options);
        } else {
            //浏览器不支持geolocation
            alert('您的浏览器不支持地理位置定位3333');
        }
    };
    //定义一个可以解析经纬度的方法，调用百度的api
    Location.prototype.loadMapApi = function (longitude, latitude) {


        var ggPoint = new BMapGL.Point(longitude, latitude);

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

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

                // 创建地理编码实例      
                var myGeo = new BMapGL.Geocoder();
                // 根据坐标得到地址描述    
                myGeo.getLocation(new BMapGL.Point(newpointx, newpointy), function (result) {
                    if (result) {
                        //alert(result.address);
                        var addComp = result.addressComponents;
                        alert( addComp.province + addComp.city  + addComp.district + addComp.street + addComp.streetNumber);
                    }
                });
            }
        }

        setTimeout(function () {
            var convertor = new BMapGL.Convertor();
            var pointArr = [];
            pointArr.push(ggPoint);
            convertor.translate(pointArr, COORDINATES_WGS84, COORDINATES_BD09, translateCallback)
        }, 1000);

    };
    //定义出现查询位置出现意外的方法
    Location.prototype.onError = function (error) {
        switch (error.code) {
            case 1:
                alert("位置服务被拒绝");
                break;
            case 2:
                alert("暂时获取不到位置信息");
                break;
            case 3:
                alert("获取信息超时");
                break;
            case 4:
                alert("未知错误");
                break;
        }
    };
    //调用
    var local = new Location();
    local.getLocation(function (res) {
        var str = "";
        for (i in res) {
            str = res[i] + str;
        }
        document.querySelector("p").innerHTML = str;
    })

</script>

</html>
码