HTML | DOM 地理位置位置属性

简介

HTML5新增了地理位置API，使得Web应用程序能够访问用户的地理位置信息。这是通过Navigator.geolocation对象实现的。在DOM中，可以使用Geolocation接口来访问用户的地理位置信息。

获取位置

获取当前地理位置可以通过给Navigator.geolocation.getCurrentPosition()方法传递一个回调函数实现，该回调函数会被Navigator.geolocation.getCurrentPosition()方法调用，并被传递一个对象作为参数，该对象包含了具体的位置信息。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition);
} else {
  console.log("该浏览器不支持使用HTML5来获取地理位置.");
}

function showPosition(position) {
  console.log("当前位置为: " + position.coords.latitude + ", " + position.coords.longitude);
}

监听位置

可以使用Navigator.geolocation.watchPosition()方法来监测用户的位置，该方法会在用户位置发生变化时执行一个回调函数。如果要停止监听用户位置，则可以使用Navigator.geolocation.clearWatch()方法取消这个方法。

以下是一个示例，每当用户位置变化时，都会将其输出到日志中：

if (navigator.geolocation) {
  var watchId = navigator.geolocation.watchPosition(showPosition);
} else {
  console.log("该浏览器不支持使用HTML5来获取地理位置.");
}

function showPosition(position) {
  console.log("当前位置为: " + position.coords.latitude + ", " + position.coords.longitude);
}

function stopWatching() {
  navigator.geolocation.clearWatch(watchId);
}

位置属性

每个位置信息对象都包含了以下属性：

• coords.latitude: 纬度
• coords.longitude: 经度
• coords.altitude: 高度（以米为单位）
• coords.accuracy: 估计的位置精度（以米为单位）
• coords.altitudeAccuracy: 估计的高度精度（以米为单位）
• coords.heading: 相对于正北方向的方向（以角度为单位）
• coords.speed: 相对于地面的速度（以米/秒为单位）

在获取位置或监听位置时，可以使用这些属性来访问具体位置信息。例如，如果要显示用户的当前纬度和经度，可以使用以下代码：

function showPosition(position) {
  console.log("当前位置为: " + position.coords.latitude + ", " + position.coords.longitude);
}

总结

HTML5的地理位置API使得Web应用程序能够访问用户的当前位置信息。使用Navigator.geolocation.getCurrentPosition()方法可以获取当前位置，使用Navigator.geolocation.watchPosition()方法可以监听位置变化。每个位置信息对象都包含了许多属性，例如纬度、经度、高度、速度等。可以使用这些属性来访问具体位置信息。