获取用户当前地理位置

最新推荐文章于 2025-02-18 00:00:00 发布

悲伤小海鸥

最新推荐文章于 2025-02-18 00:00:00 发布

阅读量557

点赞数

分类专栏： web前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_65849649/article/details/128703947

版权

web前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何利用JavaScript的navigator.geolocation API获取浏览器的地理位置信息，包括检查浏览器支持性、展示经纬度坐标，并提供了完整代码示例。

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

通过navigator.geolocation来获取浏览器的坐标属性，话不多说，直接上代码，简洁明了，通俗易懂。

1.通过判断看浏览器支不支持

if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      alert("该浏览器不支持获取地理位置");
    }

2. 展示经纬度坐标

x.innerHTML = "经度" + position.coords.longitude +
      "<br>" + "纬度" + position.coords.latitude

3.接下来看下整体代码

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button onclick="btn()">按钮</button>
  <p id="demo">这是经纬度</p>
</body>

</html>
<script>
  var x = document.getElementById("demo");
  function btn() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      x.innerHTML = "该浏览器不支持获取地理位置";
    }
  }
  function showPosition(position) {
    x.innerHTML = "经度" + position.coords.longitude +
      "<br>" + "纬度" + position.coords.latitude
  }
</script>