简介
基于位置的信息服务在我们的生活中是特别常见的需求，比如地图导航，外卖快递，家政服务以及气象信息等等，这些服务都有一个共同特点，那就是基于地理位置信息。在移动端我们很容易通过设备获取精确地理位置，浏览器端稍微差点，但是HTML5也提供了相关的API让我们获取地理位置，但是由于位置涉及隐式，必须由用户同意之后才能获取得到。
Geolocation位置服务API常用的函数和属性
-
navigator.geolocation：该属性返回一个布尔值，表示客户端是否支持Geolocation。
-
getCurrentPosition(callback())：该方法接收两个回调函数，分别处理成功和失败的回调。
-
watchPosition()：返回用户的当前位置，并继续返回用户移动时的更新位置。
-
clearWatch()：停止 watchPosition() 方法
简单示例
<!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="getLocation()">Geolocation获取地理位置</button>
<script>
function getLocation(){
if(navigator.geolocation){
console.log("支持定位");
navigator.geolocation.getCurrentPosition((function(position){
console.log("纬度="+position.coords.altitude);
console.log("经度="+position.coords.longitude);
}));
}else{
console.log("不支持地理定位");
}
}
</script>
</body>
</html>
处理错误和拒绝
上面的示例是一个特别简单的例子，不包含任何错误处理，但是出现错误也是很常见的，比如用户拒绝或者获取位置超时失败等，所以开发真实场景中，需要有处理错误的脚本。getCurrentPosition() 方法的第二个参数用于处理错误，它指定了遇到错误时回调的函数。
- Permission denied - 用户不允许地理定位
- Position unavailable - 无法获取当前位置
- Timeout - 操作超时
function getLocation(){
if(navigator.geolocation){
console.log("支持定位");
navigator.geolocation.getCurrentPosition(
(function(position){
console.log("纬度="+position.coords.altitude);
console.log("经度="+position.coords.longitude);
}),
(function(error){
if(error.PERMISSION_DENIED){
console.log("用户拒绝获取位置");
}else if(error.POSITION_UNAVAILABLE){
console.log("位置信息不可用");
}else if(error.TIMEOUT){
console.log("获取位置超时");
}else{
console.log("未知错误");
}
}));
}else{
console.log("不支持地理定位");
}
}
上面的示例处理了几个常见的错误回调，一般在支持GPS的移动设备获取位置准确度会高点。
网友评论