srcmini上一章HTML5教程请查看：html5服务器发送的事件SSE
在本教程中，你将学习如何使用HTML5地理定位功能来检测用户的位置。
地理定位是什么？
HTML5的地理定位功能可以让你找到你网站访问者当前位置的地理坐标(纬度和经度数字)。
该特性有助于为站点访问者提供更好的浏览体验。例如，你可以返回物理上接近用户位置的搜索结果。
获取来访者的坐标
使用HTML5 geolocation API获取站点访问者的位置信息非常简单。它利用了打包到导航器中的三个方法navigator.geolocation对象——getCurrentPosition()， watchPosition()和clearWatch()。
下面是一个显示当前位置的简单地理定位示例。但是，首先你需要同意让浏览器告诉web服务器你的位置。
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<title>获取当前位置</title>
<script>
function showPosition() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var positionInfo = "你的当前位置: (" + "纬度: " + position.coords.latitude + ", " + "经度: " + position.coords.longitude + ")";
document.getElementById("result").innerHTML = positionInfo;
});
} else {
alert("对不起，你的浏览器不支持HTML5地理定位");
}
}
</script>
</head>
<body>
<div id="result">
<!--位置信息将插入这里-->
</div>
<button type="button" onclick="showPosition();">显示位置</button>
</body>
</html>
注意：除非访问者给予明确的许可，否则web浏览器不会与web页面共享访问者的位置，地理位置标准将为每个需要位置数据的网站获取用户许可作为官方规则。
处理错误和拒绝
可能会出现这样的情况，即用户不想与你共享其位置数据。为了处理这种情况，可以在调用getCurrentLocation()函数时提供两个函数。
如果地理定位尝试成功，则调用第一个函数，如果地理定位尝试失败，则调用第二个函数。让我们来看一个例子：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<title>处理地理位置错误</title>
<script>
// 设置全局变量
var result;
function showPosition() {
// 存储页面显示结果的元素
result = document.getElementById("result");
// 如果地理位置是可用的，尝试获得访问者的位置
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
result.innerHTML = "获取位置信息...";
} else {
alert("对不起，你的浏览器不支持HTML5地理定位");
}
};
// 定义成功尝试的回调函数
function successCallback(position) {
result.innerHTML = "当前位置为: (" + "纬度: " + position.coords.latitude + ", " + "经度: " + position.coords.longitude + ")";
}
// 为失败的尝试定义回调函数
function errorCallback(error) {
if(error.code == 1) {
result.innerHTML = "你已经决定不分享你的位置了，但是没关系，我们不会再问你了";
} else if(error.code == 2) {
result.innerHTML = "网络故障或无法联系到定位服务";
} else if(error.code == 3) {
result.innerHTML = "在获取位置数据之前，尝试超时";
} else {
result.innerHTML = "由于未知错误导致地理定位失败";
}
}
</script>
</head>
<body>
<div id="result">
<!--位置信息将插入这里-->
</div>
<button type="button" onclick="showPosition();">显示位置</button>
</body>
</html>
在谷歌地图显示位置
你可以对地理位置数据做一些非常有趣的事情，比如在谷歌地图上显示用户位置。下面的示例将显示你在谷歌地图上的当前位置，该地图基于通过HTML5 geolocation特性检索到的纬度和经度数据。
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<title>使用谷歌地图</title>
<script>
function showPosition() {
navigator.geolocation.getCurrentPosition(showMap);
}
function showMap(position) {
// 获取位置数据
var latlong = position.coords.latitude + "," + position.coords.longitude;
// 设置谷歌地址源url
var mapLink = "https://maps.googleapis.com/maps/api/staticmap?center="+latlong+"&zoom=16&size=400x300&output=embed";
// 创建并插入谷歌地图
document.getElementById("embedMap").innerHTML = "<img alt='Map Holder' src='"+ mapLink +"'>";
}
</script>
</head>
<body>
<button type="button" onclick="showPosition();">在谷歌地图上显示我的位置</button>
<div id="embedMap">
<!--这里将嵌入谷歌地图-->
</div>
</body>
</html>
上面的示例将使用静态图像简单地显示谷歌映射上的位置。然而，你也可以创建交互式的谷歌地图，通过拖动、放大/缩小和其他你在现实生活中遇到的功能。让我们看看下面的例子：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<title>使用谷歌地图</title>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function showPosition() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMap, showError);
} else {
alert("对不起，你的浏览器不支持HTML5地理定位");
}
}
// 定义成功尝试的回调函数
function showMap(position) {
// 获取位置数据
lat = position.coords.latitude;
long = position.coords.longitude;
var latlong = new google.maps.LatLng(lat, long);
var myOptions = {
center: latlong,
zoom: 16,
mapTypeControl: true,
navigationControlOptions: {
style:google.maps.NavigationControlStyle.SMALL
}
}
var map = new google.maps.Map(document.getElementById("embedMap"), myOptions);
var marker = new google.maps.Marker({ position:latlong, map:map, title:"你在这里!" });
}
// 为失败的尝试定义回调函数
function showError(error) {
if(error.code == 1) {
result.innerHTML = "你已经决定不分享你的职位了，但是没关系，我们不会再问你了";
} else if(error.code == 2) {
result.innerHTML = "网络故障或无法联系到定位服务";
} else if(error.code == 3) {
result.innerHTML = "在获取位置数据之前，尝试超时";
} else {
result.innerHTML = "由于未知错误导致地理定位失败";
}
}
</script>
</head>
<body>
<button type="button" onclick="showPosition();">在谷歌地图上显示我的位置</button>
<div id="embedMap" style="width: 400px; height: 300px;">
<!--这里将嵌入谷歌地图-->
</div>
</body>
</html>
监控访客的活动
到目前为止，我们使用的所有示例都依赖于getCurrentPosition()方法。但是，geolocation对象有另一个方法watchPosition()，该方法允许你在位置更改时返回更新后的位置，从而跟踪访问者的移动。
watchPosition()具有与getCurrentPosition()相同的输入参数，但是watchPosition()可能多次触发success函数——当它第一次获得位置时，以及在它检测到新位置时，让我们看看它是如何工作的：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<title>监控位置</title>
<script>
// 设置全局变量
var watchID;
function showPosition() {
if(navigator.geolocation) {
watchID = navigator.geolocation.watchPosition(successCallback);
} else {
alert("对不起，你的浏览器不支持HTML5地理定位");
}
}
function successCallback(position) {
toggleWatchBtn.innerHTML = "停止监控";
// 在做任何事情之前，检查位置是否改变
if(prevLat != position.coords.latitude || prevLong != position.coords.longitude){
// 设置之前的位置
var prevLat = position.coords.latitude;
var prevLong = position.coords.longitude;
// 获取当前位置
var positionInfo = "你的当前位置 (" + "纬度: " + position.coords.latitude + ", " + "经度: " + position.coords.longitude + ")";
document.getElementById("result").innerHTML = positionInfo;
}
}
function startWatch() {
var result = document.getElementById("result");
var toggleWatchBtn = document.getElementById("toggleWatchBtn");
toggleWatchBtn.onclick = function() {
if(watchID) {
toggleWatchBtn.innerHTML = "开始监控";
navigator.geolocation.clearWatch(watchID);
watchID = false;
} else {
toggleWatchBtn.innerHTML = "关于获取地理位置...";
showPosition();
}
}
}
// 初始化整个系统(如上)
window.onload = startWatch;
</script>
</head>
<body>
<button type="button" id="toggleWatchBtn">开始监控</button>
<div id="result">
<!--位置信息将插入这里-->
</div>
</body>
</html>
评论前必须登录！
注册