<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p
{
width: 100px;
height: 100px;
padding: 0px;
border: 1px solid black;
}
</style>
</head>
<body>
<button onclick="f()">获取地址</button>
<p id="lo"></p>//用于信息显示
<script>
var x=document.getElementById("lo");
function f()
{
if(navigator.geolocation)//如果浏览器支持地理定位
{
navigator.geolocation.getCurrentPosition(showPosition,showerror);//getCurrentPosition方法运行成功后，会返回coordinates对象，将这个对象传入showPosition函数，如果运行失败，会返回一个对象包含了错误的信息并传入getCurrentPositon()第二个参数
}
else
{
x.innerHTML="浏览器不支持获取地理位置";
}
}
function showerror(error)//处理错误的函数
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝访问";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="数据不可用";
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误";
break;
}
}
function showPosition(position)//将获取的坐标信息显示到界面
{
x.innerHTML="纬度"+position.coords.latitude
+"经度"+position.coords.longitude;
}
</script>
</body>
</html>
Navigator 对象包含有关浏览器的信息。例如一些浏览器的名称 地理定位功能 浏览器的语言 版本信息 等等等;
这里最重要的是getCurrentPostion()函数，该函数运行成功了会返回一个coordinates对象传给第一个形参，该对象包含了一些位置信息
- Permission denied - 用户不允许地理定位
- Position unavailable - 无法获取当前位置
- Timeout - 操作超时
- Unknown_error 未知错误
- watchPosition()方法和getCurrentPosition()方法用法一样，不过watchPositon()
返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
clearWatch() - 停止 watchPosition() 方法 您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：