前端定位实现

最新推荐文章于 2024-10-12 08:57:53 发布

原创最新推荐文章于 2024-10-12 08:57:53 发布 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#h5定位

前端js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在前端项目，特别是Vue项目中实现H5定位。通过引入百度API，并使用getScript方法来处理，实现了基于IP地址的定位功能。

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

前端定位实现

首先，需要引入百度api

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&ak=密匙"></script>

在vue项目中需要把api改为getscript

<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.2&ak=密匙"></script>

h5定位

function getlocal(getlocalSuccess) {
    //首先设置默认城市
    var defCity = {
        id: '000001',
        city: '北京',
        province: "",
        district: ""
    };
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            function (position) {
              //获取地理位置成功时所做的处理
                var lat = position.coords.latitude;//估计精度
                var lon = position.coords.longitude;//估计纬度
                var point = new BMap.Point(lon, lat); // 创建点坐标
                var gc = new BMap.Geocoder();
                
                gc.getLocation(point, function (rs) {
                    var addComp = rs.addressComponents;
                    var curCity = {
                        id: '',
                        city: addComp.city,
                        province: addComp.province,
                        district: addComp.district
                    }
                    
                    if (getlocalSuccess != undefined) {
                        getlocalSuccess(curCity);
                    }
                })
            },
            function (error) {
            //获取地理位置失败时所做的处理
                switch (error.code) {
                    case 1:
                        alert("位置服务被拒绝。");
                        break;
                    case 2:
                        alert("暂时获取不到位置信息。");
                        break;
                    case 3:
                        alert("获取位置信息超时。");
                        break;
                    default:
                        alert("未知错误。");
                        break;
                }
            }
            )
    } else {
        if (getlocalSuccess != undefined) {
            getlocalSuccess(defCity);
        }
    }
}

百度定位通过ip地址定位

var myCity = new BMap.LocalCity();
myCity.get(relocation);
//初始化定位
function relocation(result) {
    that.address = result.name;
}