使用JavaScript实现位置定位功能-优快云博客

这篇博客分享了一个简单的JavaScript定位功能代码，适用于查看用户当前地理位置，仅包含基本定位功能，可作为参考。

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

这是一个小小的定位功能，没有添加其他功能，仅供大家参考，下面是代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>逆地理编码</title>
    <link rel="stylesheet" href="../API/Api.css"/>
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.3&key=ada0145080deff882d2a28e8af2047ad&plugin=AMap.Geocoder"></script>
    <script type="text/javascript" src="../API/toolbar.js"></script>
</head>
<body>

<div class="box_dis">
    <div type="text" class="search"><img id="" src="../API/images.jpg" height="15" width="15">搜索地点
    </div>
</div>
<div class="distance">
    <div id="container"></div>
</div>
<div class="scroll" id="view">

    <div class='list' >
<p id="result" class='site'></p>
        <span class='right'><img class='tex' src='../API/outstyle091100004.jpg' id="+name.site+"></span></div>
   


</div>


<script type="text/javascript">
    window.onload = function () {
        getLocation()
        regeocoder()
    }

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        }

    }
    function showPosition(position) {



        var obj_info = {name: position.coords.latitude, shop: position.coords.longitude};

        localStorage.setItem("info", JSON.stringify(obj_info));


    }

    function regeocoder() {  //逆地理编码
        var map = new AMap.Map("container", {
                    resizeEnable: true,
                    zoom: 18
                })
        lnglatXY = []
        var ss=JSON.parse(localStorage.getItem("info"))
        lnglatXY.push(ss.shop)
        lnglatXY.push(ss.name)

        console.log(lnglatXY)
               ;
        var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
        });
        geocoder.getAddress(lnglatXY, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                geocoder_CallBack(result);
            }
        });
        var marker = new AMap.Marker({  //加点
            map: map,
            position: lnglatXY
        });
        map.setFitView();
    }
    function geocoder_CallBack(data) {
        var address = data.regeocode.formattedAddress; //返回地址描述
        document.getElementById("result").innerHTML = address;
    }
</script>
</body>
</html>

css代码也带来了，不用谢

.search{
    height: 20px;
    width: 98%;
    margin-left: 12px;
    border:1px solid #e3e3e3;
    text-align: center;
    font-size: 5px;
   color:gray;
}
#mapContainer{
    height: 300px;
    width: 100%;



    left: 0;
    right:0;
    bottom:0;
}
.map{
    height: 300px;
    width: 100%;



    left: 0;
    right:0;
    bottom:0;
}
.scroll{
    height: 325px;
    width: 100%;
    overflow-y:scroll;


}
/*overflow:hidden*/
html { overflow: hidden; }
body{
    margin: 0;
}
.distance{
    margin-top: 8px;
    margin-bottom: 4px;
}
.box_dis{
    margin-top: 10px;
}

/*div#view::-webkit-scrollbar {*/
    /*background: transparent;*/
/*}*/

/*div#view:hover::-webkit-scrollbar {*/
    /*background: lightyellow;*/
/*}*/
.list{
    width: 98%;
    height: 50px;

    border-bottom:1px solid #e3e3e3;
    margin-left:25px;
}
.site{

    padding-top: 10px;

}