Html5 Geolocation Api
在HTML5中,window.navagator对象新增了一个geolocation属性,可以使用Geolocation API 来访问该属性.
HTML5 Geolocation API的使用方法相当简单。请求一个位置信息，如果用户同意，浏览器就会返回信息，该信息是通过支持HTML5地理定位功能的底层设备提供给浏览器的。位置信息由纬度、经度坐标和一些其他元数据组成，有了这些位置信息就可以构建引人注目的位置感知类应用程序。
HTML5 Geolocation API 封装在 navigator.geolocation 属性里，各种接口即是 navigator.geolocation 对象的方法。
在使用之前，首先要检测浏览器是否支持Geolocation，使用下面的方法检测。
if(navigator.geolocation)getCurrentPosition 用来获取用户当前的位置信息，该方法带有三个参数：
1、successCallback：成功获取用户位置信息后的回调函数
2、errorCallback：获取用户位置信息失败时的回调函数
3、positionOptions：可选。获取用户位置信息的配置参数
i）、successCallback
successCallback 函数带有一个参数，对象字面量格式，表示获取到的用户位置数据。该对象包含两个属性 coords 和 timestamp。其中 coords 属性包含以下7个值：
1、accuracy：精确度
2、latitude：纬度
3、longitude：经度
4、altitude：海拔
5、altitudeAcuracy：海拔高度的精确度
6、heading：朝向
7、speed：
ii）、errorCallback
和 successCallback 函数一样带有一个参数，对象字面量格式，表示返回的错误代码。它包含以下两个属性：
1、message：错误信息
2、code：错误代码。
其中错误代码包括以下四个值：
0 — UNKNOW_ERROR：表示不包括在其它错误代码中的错误，这里可以在 message 中查找错误信息
1 — PERMISSION_DENIED：表示用户拒绝浏览器获取位置信息的请求
2 — POSITION_UNAVALIABLE：表示网络不可用或者连接不到卫星
3 — TIMEOUT：表示获取超时。必须在options中指定了timeout值时才有可能发生这种错误
iii）、positionOptions
positionOptions 的数据格式为JSON，有三个可选的属性：
1、enableHighAcuracy — 布尔值： 表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间。
2、timeout — 整数： 表示浏览需要在指定的时间内获取位置信息，否则触发errorCallback。
3、maximumAge — 整数/常量： 表示浏览器重新获取位置信息的时间间隔。
watchPosition()
watchPosition 的三个参数和 getCurrentPosition 完全一样，不同的是 watchPosition 是设计用来实时获取＼检测用户的位置信息。它像一个追踪器一样时刻监视用户的位置，只要发生变化，浏览器就会触发 watchPosition 的回调函数。成功则触发 successCallback ，否则触发 errorCallback。
另外和 getCurrentPosition 不同的地方就是有返回值。类似于延迟函数/间隔函数（setTimeout/setInterval）那样，返回一个 ID ，可以被清除掉。这里是用接下来介绍的 clearWatch 清除。
clearWatch()
接受一个 watchPosition 返回的 ID，功能是清除对用户位置的循环监视。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?&key=your_key&sensor=true_or_false">
</script>
<script type="text/javascript">
window.onload = initialize();
function initialize() {
var options = {
maximumAge:60*1000*2,
timout:5000
}
navigator.geolocation.getCurrentPosition(showMap,showError,options);
}
function showMap(position){
var coords = position.coords;
var mapOptions = {
center: new google.maps.LatLng(coords.latitude, coords.longitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function showError(error){
var errorTypes = {
1:'位置服务被拒绝',
2:'获取不到位置信息',
3:'获取信息超时'
}
alert(errorTypes[error.code] + ": 不能确定你的当前地理位置.")
}
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
