HTML 地理定位 API
HTML 地理位置 API 用于定位用户的位置。
定位用户位置
HTML 地理位置 API 用于获取用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
注释： 地理定位是最准确的设备与全球定位系统，如智能手机。
浏览器支持
表中的数字指定完全支持地理位置的第一个浏览器版本。
| API | |||||
|---|---|---|---|---|---|
| Geolocation | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
注释： 从 Chrome50 开始，地理位置 API 只在诸如 HTTPS 这样的安全上下文上工作。如果站点托管在非安全源(例如 HTTP)上，则获取用户位置的请求将不再起作用。
使用HTML地理位置
getCurrentPosition() 方法用于返回用户的位置。
下面的实例返回用户位置的纬度和经度：
实例
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "此浏览器不支持地理定位。";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
亲自试一试 »
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "此浏览器不支持地理定位。";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
实例说明：
- 检查是否支持地理定位
- 如果支持，请运行 getCurrentPosition() 方法。如果没有，则向用户显示一条消息
- 如果 getCurrentPosition()方法成功，它将坐标对象返回到参数( showPosition )中指定的函数
- showPosition() 函数输出纬度和经度
上面的例子是一个非常基本的地理定位脚本，没有错误处理。
处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误。它指定在无法获取用户位置时要运行的函数：
实例
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "用户拒绝了地理定位请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "位置信息不可用。"
break;
case error.TIMEOUT:
x.innerHTML = "获取用户位置的请求超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "出现未知错误。"
break;
}
}
亲自试一试 »
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "用户拒绝了地理定位请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "位置信息不可用。"
break;
case error.TIMEOUT:
x.innerHTML = "获取用户位置的请求超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "出现未知错误。"
break;
}
}
在地图中显示结果
要在地图中显示结果，您需要访问地图服务，如 Google 地图。
在下面的实例中，返回的纬度和经度用于在 Google 地图中显示位置(使用静态图像)：
实例
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var 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+"'>";
}
var latlon = position.coords.latitude + "," + position.coords.longitude;
var 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+"'>";
}
特定位置信息
本页演示了如何在地图上显示用户的位置。
地理定位对于特定位置的信息也非常有用，例如：
- 最新本地信息
- 显示用户附近的兴趣点
- 逐段导航(GPS)
getCurrentPosition() 方法-返回数据
getCurrentPosition() 方法在成功时返回一个对象。始终返回纬度、经度和精度属性。如果可用，则返回其他属性：
| 属性 | 返回数据 |
|---|---|
| coords.latitude | 以十进制数表示的纬度(始终返回) |
| coords.longitude | 以十进制数表示的经度(始终返回) |
| coords.accuracy | 位置的准确性(始终返回) |
| coords.altitude | 平均海平面以上的海拔高度(如有返回) |
| coords.altitudeAccuracy | 位置的高度精度(如有返回) |
| coords.heading | 航向为从北顺时针方向的度数(如有返回) |
| coords.speed | 以米/秒为单位的速度(如果可用，返回) |
| timestamp | 响应的日期/时间(如果可用，则返回) |
地理定位对象-其他有趣的方法
地理定位对象还有其他有趣的方法：
watchPosition()- 返回用户当前位置，并在用户移动时继续返回更新位置(如车内的GPS)。clearWatch()- 停止watchPosition()方法。
下面的实例显示watchPosition()方法。您需要一个精确的GPS设备来测试(如智能手机)：
实例
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "此浏览器不支持地理定位。";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
亲自试一试 »
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "此浏览器不支持地理定位。";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
