JavaScript中Geolocation详细使用介绍

如需在地图中显示结果，您需要访问地图服务，例如 Google 地图。

 

在下面的例子中，返回的纬度和经度用于在 Google 地图中显示位置（使用静态图像）：

 

实例

function showPosition(position) {

  let latlon = position.coords.latitude + "," + position.coords.longitude;

 

  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=

  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

 

  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";

}

Location-specific 信息

此页面演示了如何在地图上显示用户的位置。

 

Geolocation 对于特定于位置的信息也非常有用，例如：

 

最新的本地信息

显示用户附近的兴趣点

逐向导航（Turn-by-turn navigation）(GPS)

getCurrentPosition() 方法 - 返回数据

getCurrentPosition() 方法在成功时返回一个对象。会始终返回纬度、经度和精度属性。如果可用，则返回其他属性：

 

属性 返回

coords.latitude 以十进制数表示的纬度（始终返回）。

coords.longitude 以十进制数表示的经度（始终返回）。

coords.accuracy 位置精度（始终返回）。

coords.altitude 平均海平面以上的高度（以米计）（如果可用则返回）。

coords.altitudeAccuracy 位置的高度精度（如果可用则返回）。

coords.heading 从北顺时针方向的航向（如果可用则返回）。

coords.speed 以米/秒计的速度（如果可用则返回）。

timestamp 响应的日期/时间（如果可用则返回）。

Geolocation 对象 - 其他有趣的方法

Geolocation 对象还有其他有趣的方法：

 

watchPosition() - 返回用户的当前位置，并随着用户移动（如汽车中的 GPS）继续返回更新的位置。

clearWatch() - 停止 watchPosition () 方法。

下面的例子展示了 watchPosition() 方法。你需要准确的 GPS 设备来测试（比如智能手机）：

 

实例

<script>

const x = document.getElementById("demo");

function getLocation() {

  if (navigator.geolocation) {

    navigator.geolocation.watchPosition(showPosition);

  } else {

    x.innerHTML = "Geolocation is not supported by this browser.";

  }

}

function showPosition(position) {

  x.innerHTML = "Latitude: " + position.coords.latitude +

  "<br>Longitude: " + position.coords.longitude;

}

</script>