获取当前位置（省，市，区，街道）js

最新推荐文章于 2025-06-15 15:41:46 发布

转载最新推荐文章于 2025-06-15 15:41:46 发布 · 6k 阅读

前端专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种使用JavaScript进行地理定位的方法，并结合百度地图API实现了精确的城市定位。文章详细解释了如何处理定位成功和失败的情况，同时提供了在不同浏览器环境下获取用户地理位置信息的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var getLocation = function (successFunc, errorFunc) { //successFunc获取定位成功回调函数，errorFunc获取定位失败回调

    //首先设置默认城市
    var defCity = {
        id: '000001',
        name: '北京市',
        date: new Date()//获取当前时间方法
    };
    //默认城市
    $.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(defCity), { expires: 1, path: '/' });

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;
            //var map = new BMap.Map("container");   // 创建Map实例
            var point = new BMap.Point(lon, lat); // 创建点坐标
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function (rs) {
                var addComp = rs.addressComponents;
                var curCity = {
                    id: '',
                    name: addComp.province,
                    date: new Date()
                };
                //当前定位城市
                $.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' });
                var htm="<span class=\"mui-icon mui-icon-location\" style=\"color:#fff;font-size:2rem;\"></span>";
                htm+=addComp.city+" "+addComp.district;
                $('#current_location').html(htm);
                // alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);
                if (successFunc != undefined)
                    successFunc(addComp);
            });
        },
        function (error) {
            switch (error.code) {
                case 1:
                    alert("位置服务被拒绝。");
                    break;
                case 2:
                    alert("暂时获取不到位置信息。");
                    break;
                case 3:
                    alert("获取位置信息超时。");
                    break;
                default:
                    alert("未知错误。");
                    break;
            }
            var curCity = {
                id: '000001',
                name: '北京市',
                date: new Date()
            };
            //默认城市
            $.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' });
            if (errorFunc != undefined)
                errorFunc(error);
        }, { timeout: 5000, enableHighAccuracy: true });
    } else {
        alert("你的浏览器不支持获取地理位置信息。");
        if (errorFunc != undefined)
            errorFunc("你的浏览器不支持获取地理位置信息。");
    }
};
var showPosition = function (position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    //var map = new BMap.Map("container");   // 创建Map实例
    var point = new BMap.Point(lon, lat); // 创建点坐标
    var gc = new BMap.Geocoder();
    gc.getLocation(point, function (rs) {
        var addComp = rs.addressComponents;
        var curCity = {
            id: '',
            name: addComp.province,
            date: new Date()
        };
        //当前定位城市
        $.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' });
        alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);
    });
};
var showPositionError = function (error) {
    switch (error.code) {
        case 1:
            alert("位置服务被拒绝。");
            break;
        case 2:
            alert("暂时获取不到位置信息。");
            break;
        case 3:
            alert("获取位置信息超时。");
            break;
        default:
            alert("未知错误。");
            break;
    }
    var curCity = {
        id: '000001',
        name: '北京市',
        date: new Date()
    };
    //默认城市
    $.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' });
};
getLocation();

第二种方法：来自https://www.cnblogs.com/teersky/p/7244865.html

IOS系统在10以上版本考虑到安全问题禁止用户在http协议下定位，要想定位必须将http协议升级成https协议，可以调用百度地图API接口实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的Key(在百度地图免费申请)"></script>
    <title>定位</title>
</head>
<body>
    <div id="allmap" style="width: 0;height: 0; display: none;"></div>
    <script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(108.95,34.27);
    map.centerAndZoom(point,12);
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){console.log(r.point)
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            var point = new BMap.Point(r.point.lng,r.point.lat);
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function(rs){
               var addComp = rs.addressComponents; 
               console.log(rs);  
                 alert(addComp.city+"==="+addComp.district)
            });
        }else {
            alert('failed'+this.getStatus());
        }
    },{enableHighAccuracy: true})
    </script>