1.不多说,先看一个小demo
<!DOCTYPE html>
<html>
<head>
<title>地理定位</title>
</head>
<body>
<div id="location">
your location will go here
</div>
</body>
<script type="text/javascript">
window.onload = getMyLocation;
function getMyLocation(){
// 如果navigator.geolocation对象存在,说明浏览器支持这个API
if (navigator.geolocation) {
// 如果浏览器支持地理定位API,则调用getCurrentPosition方法
// 并传入一个处理函数displayLocation
navigator.geolocation.getCurrentPosition(displayLocation);
}else{
alert("你的浏览器不支持地理定位");
}
}
function displayLocation(position){
// 从position.coords得到纬度和经度
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var div = document.getElementById("location");
div.innerHTML = "你在纬度: " + latitude +",经度: " + longitude;
}
</script>
</html>
实际上,navigator.geolocation属性是一个对象,其中包含了整个地理定位API。下面深入的了解这个方法,它有3个参数,其中2个是可选的:getCurrentPosition(successHandler,errorHandler,options);
successHandler浏览器成功回调函数,errorHandler浏览器无法确定你的位置会调用这个函数,options参数允许你定制地理定位方法。
地理定位失败处理
我们需要为getCurrentPosition方法调用增加一个错误处理程序,只要地理定位API在确定你的位置时遇到问题就会调用这个处理程序:getCurrentPosition(displayLocation,displayError);
需要知道的是,geolocation将会向你的处理程序传入一个error对象,其中包含了一个数值码
function displayError(error){
var errorTypes = {
0: "UnKnow error",
1: "Permission denied by user",
2: "Position is no available",
3: "Request timed out"
};
var errorMessage = errorTypes[error.code];
if (error.code == 0 || error.code == 2) {
errorMessage = errorMessage + "" + error.message;
}
var div = document.getElementById("location");
div.innerHTML = errorMessage;
}