7-18 地理定位学习-优快云博客

本文链接：https://blog.youkuaiyun.com/lhy010831/article/details/125853461

本文介绍了如何使用JavaScript获取用户位置并动态更新标签，展示了navigator.geolocation API的应用。通过按钮触发位置获取，并在获取成功时显示经纬度，若无法获取则显示提示信息。

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

1、先创建一个按钮和标签按钮用来点击时标签内容会变成当前位置经纬度

 <p id="location">显示定位信息：</p>
    <button onclick="">点击获取信息</button>

2、下面开始通过js先去尝试能不能获取到标签

   var hq=document.getElementById("location");
    console.log(hq);

3、定义函数获取定位信息

 function showLocation(){
        // 通过if判断navigator.geolocation对象是否获取到了位置信息
        // 如果是则会进行展示否则会显示为无法获取信息
        if(navigator.geolocation){
            // 通过navigator.geolocation里边的getCurrentPosition方法获取信息(只请求一次)回调函数传入一个location_1的对象获取到信息
                                    
            navigator.geolocation.getCurrentPosition(location_1);
        }else{
            
            hq.innerHTML="无法获取信息"
        }
    }

 function location_1(position){
        // 获取到当前经纬度之后替换掉p标签里的内容
        // 注 ：latitude是纬度 longitude是经度   
        x.innerHTML="纬度:"+position.coords.latitude+"经度"+ position.coords.longitude;
    }

4、给button一个showLocation()点击事件；

结果如下：