获取用户当前地理位置

通过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>

猜你喜欢

转载自blog.csdn.net/m0_65849649/article/details/128703947