<!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):