HTML5 地理定位-KeepStudy

HTML5 地理定位

##### getCurrentPosition() 方法 返回数据
>始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

| 属性 | 描述 |
|-----|-----|
| coords.latitude | 十进制数的纬度 |
| coords.longitude | 十进制数的经度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以米计 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，从正北开始以度计 |
| coords.speed | 速度，以米/每秒计 |
|timestamp | 响应的日期/时间 |

##### 使用地理定位
```javascript
<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() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数

```javascript
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;
  }
}
```

##### 在地图中显示结果
```javascript
function showPosition(position){
var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";

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

##### Geolocation 对象
- watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
- clearWatch() - 停止 watchPosition() 方法

```javascript
<script>
var x=document.getElementById("demo");
function getLocation()  {
	if (navigator.geolocation)    {
	   navigator.geolocation.watchPosition(showPosition);
	} else{
	   x.innerHTML="该浏览器不支持获取地理位置。";
	}
}
function showPosition(position)  {
  x.innerHTML = "纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude;
}
</script>
```

顶部

HTML5

目录

相关推荐