使用原生js+百度地图api实现获取当前地理位置

米奇妙妙wuu

已于 2023-05-27 09:49:36 修改

阅读量708

点赞数 1

文章标签： javascript 前端开发语言

于 2023-03-24 17:00:44 首次发布

本文链接：https://blog.csdn.net/m0_60676278/article/details/129754519

版权

在百度地图获取到自己的百度地图ak，填到ak的位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Title</title>
</head>

<body>
    您目前在<p></p>
</body>
<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("getocation(callbackFunction) 可获得定位信息对象");
            };
        var self = this;
        if (navigator.geolocation) {
            //浏览器支持geolocation
            navigator.geolocation.getCurrentPosition(function (position) {
                //经度
                var longitude = position.coords.longitude;
                //纬度
                var latitude = position.coords.latitude;
                self.loadMapApi(longitude, latitude);
            }, self.onError, options);
        } else {
            //浏览器不支持geolocation
        }
    };
    //定义一个可以解析经纬度的方法，调用百度的api
    Location.prototype.loadMapApi = function (longitude, latitude) {
        var self = this;
        var oHead = document.getElementsByTagName('HEAD').item(0);
        var oScript = document.createElement("script");
        oScript.type = "text/javascript";
        oScript.src = "http://api.map.baidu.com/getscript?v=2.0&ak=*****";
        oHead.appendChild(oScript);
        oScript.onload = function (date) {
            var point = new BMap.Point(longitude, latitude);
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function (rs) {
                var addComp = rs.addressComponents;
                console.log(addComp);
                self.callback(addComp);
            });
        }
    };
    //定义出现查询位置出现意外的方法
    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();
let defaultCity =     local.getLocation(function (res) {
    console.log(res);
        var str = ""
        for (i in res) {
            str = res[i] + str
        }
        console.log(str);
        var reg = /.+?(省|市|自治区|自治州|县|区)/g; // 省市区的正则
        city = str.match(reg)
        console.log(city[city.length-1]);

        document.querySelector("p").innerHTML = str;
    })
</script>

</html>