HTML网页获取当前定位经纬度/地理位置定位/百度定位/高德定位

某只杂鱼

已于 2023-07-31 17:03:50 修改

阅读量8.4k

点赞数 3

分类专栏：前端 GIS 文章标签： html5 经验分享

于 2022-03-28 11:08:40 首次发布

本文链接：https://blog.csdn.net/qq_36604536/article/details/123788580

版权

前端同时被 2 个专栏收录

22 篇文章 4 订阅

订阅专栏

GIS

3 篇文章 0 订阅

订阅专栏

文章目录

需求描述

在HTML页面获取当前定位经纬度

参考代码

优先使用地理位置定位，定位失败时取百度定位，否则使用高德IP定位：

<!-- 引入百度地图API（需申请百度地图开发者账号，创建秘钥使用） -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&amp;ak=您的密钥"></script>

// 判断字符串是否为空
function isStrEmpty(str) {
    return "undefined" === typeof str || str === null || str === "undefined" || str === "null" || str.toString().trim().length < 1;
}

var current_lng, current_lat; // 当前定位经度，当前定位纬度
var getCurrentPosition = function () {
    console.log("定位中.."); // 此处可在页面增加定位加载效果提示用户
    if (navigator.geolocation) { // 浏览器支持定位
        navigator.geolocation.watchPosition( // 监听定位变更
            function (pos) { // 成功回调函数，接受一个地理位置的对象作为参数（网页需配置https）
                current_lng = pos.coords.longitude;
                current_lat = pos.coords.latitude;
                console.log("地理位置定位: " + current_lng + "," + current_lat); // 注意：此处经纬度为wgs84坐标
                console.log("定位成功！"); // 此处可在页面增加定位成功提示
            },
            function (error) { // 出错时取百度地图定位（需引入引入百度地图API）
                console.log("需开启定位权限！"); // 此处可在页面增加提示
                var geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function (r) {
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                        current_lng = r.point.lng;
                        current_lat = r.point.lat;
                        console.log("百度地图定位: " + current_lng + "," + current_lat); // 注意：此处经纬度为百度坐标
                        console.log("定位成功！"); // 此处可在页面增加定位成功提示
                    }
                });
            },
            {
                enableHighAccuracy: true, // 是否获取高精度结果
                timeout: 1000, // 超时,毫秒
                maximumAge: 0 // 可以接受多少毫秒的缓存位置
            });
    } else { // 高德IP定位（精度低）
        console.log("您的浏览器不支持定位..");
        $.ajax({ // 需引入jQuery
            type: "POST",
            // 调用高德IP定位（需申请高德地图开发者账号，创建秘钥使用）
            url: "https://restapi.amap.com/v3/ip?key=您的秘钥",
            async: true, // 默认：异步请求
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "",
            success: function (data) {
                // console.log(data, JSON.stringify(data));
                if ("rectangle" in data && !isStrEmpty(data.rectangle)) { // data.rectangle：IP所在经纬度范围
                    // data.rectangle："116.0119343,39.66127144;116.7829835,40.2164962"
                    var locList = data.rectangle.split(";");
                    var lngSum = 0, latSum = 0;
                    for (var i in locList) {
                        var locInfos = locList[i].split(",");
                        lngSum = parseFloat(lngSum) + parseFloat(locInfos[0]);
                        latSum = parseFloat(latSum) + parseFloat(locInfos[1]);
                    }
                    // 取返回经纬度的平均值，保留6位小数
                    current_lng = parseFloat(lngSum / locList.length).toFixed(6);
                    current_lat = parseFloat(latSum / locList.length).toFixed(6);
                    console.log("高德地图定位: " + current_lng + "," + current_lat); // 定位误差巨大..经纬度坐标不同导致的偏差可忽略不计
                    console.log("定位成功！"); // 此处可在页面增加定位成功提示
                }
            }
        });
    }
};