基本示例
- html基础代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>获取浏览器的地理定位</title>
</head>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<body>
<div id="location">
Your location will go here;
</div>
</body>
</html>
- js代码：
var options = {enableHighAccuracy:true,timeout:100,maximumAge:0};
window.onload = getMyLocation;
function getMyLocation(){
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayPosition,displayError,options);
}else{
alert('the broswer do not support geolocation.');
}
};
function displayPosition(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var location = document.getElementById('location');
location.innerHTML = 'You position is at Latitude:' + latitude + ',Longitude:' + longitude;
location.innerHTML += " (found in " + options.timeout + " milliseconds)";
}
function displayError(error){
var errorTypes = {
0 : 'Unknown error',
1 : 'Permission denied by user',
2 : 'Position is not available',
3 : 'Request timed out'
};
var errMsg = errorTypes[error.code];
if(error.code === 0 || error.code === 2){
errMsg += ' ' + error.message;
}
var location = document.getElementById('location');
location.innerHTML = errMsg;
options.timeout += 100;
navigator.geolocation.getCurrentPosition(displayPosition,displayError,options);
location.innerHTML += "…… checking again with timeout = " + options.timeout;
地理定位中概要知识点
与蜂窝基站三角定位或网络IP相比，GPS是获取位置的一种更为精确的方法。
地理定位API的主要方法是getCurrentPosition，这是navigator.geolocation对象的一个方法，navigator.geolocation是navigator对象中的一个属性，它也是一个对象，包含了整个地理定位API。
getCurrentPosition是API的一个主要方法，它的功能是获取当前浏览器的位置，它有一个必要参数，即成功处理程序，还有两个可选参数，分别是错误处理程序和选项。
navigator.geolocation.getCurrentPosition(successHandler,errorHandler,options)
- successHandler：获取位置成功时候的调用函数
- errorHandler：获取位置出错时的调用函数
- options：允许定制地理定位方法
position对象包含一个coords属性，这是一个coordinates对象。
coordinate对象的属性包括纬度(latitude)和经度(longitude)和精度(accuracy)。
调用getCurrentPosition时，浏览器必须验证你允许共享你的位置。
getCurrentPosition的第三个参数options对象有一些属性，可以设置这些属性来控制地理定位API的行为。
maximumAge属性确定getCurrentPosition是否使用一个缓存位置，如果是，他指定了请求一个全新位置之前这个位置的最大年龄。
timeout属性确定调用错误处理程序之前getCurrentPosition可以有多长时间来得到一个全新的位置。
enableHighAccuracy属性向设备提供一个提示，如果可以得到一个高精度的位置，需要更多能量。
可以使用地理位置定位API并结合Google Maps API（BMap百度地图API）在地图上显示你的位置。
相关截图解析
获取位置数据函数解析：
成功处理程序解析：
错误处理程序解析：
选项解析：
示例是我从书上摘下来的，详情更多可以参考书籍：《Head First HTML5 Programming》
