内容速递：看了本文您能了解到的知识！
位置是个人隐私，但技术得学习！
官方介绍：
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
查看浏览器中是否有navigator.geolocation对象，有的话说明支持定位。
在这个对象下有一个getCurrentPosition()，可以获取当前的经度和纬度。
语法
navigator.geolocation.getCurrentPosition(success, error, options)
参数
success
成功得到位置信息时的回调函数，使用Position]对象作为唯一的参数。
error 可选
获取位置信息失败时的回调函数，使用 PositionError]对象作为唯一的参数，这是一个可选项。
options 可选
一个可选的PositionOptions对象。
getCurrentPosition()接受第一个参数是一个方法，也就是获取地址成功的回调。
navigator.geolocation.getCurrentPosition((e) => {console.log(e)})
首先回询问你，是否授予权限。
在浏览器的执行截图
可以看到，已经成功获取了经纬度。
获取成功的数据
| 属性 | 描述 |
|---|---|
| coords.latitude | 十进制数的纬度 |
| coords.longitude | 十进制数的经度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以米计 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，从正北开始以度计 |
| coords.speed | 速度，以米/每秒计 |
| timestamp | 响应的日期/时间 |
当然异常的场景还是需要我们自己来模拟，接收第二个参数。
navigator.geolocation.getCurrentPosition((e) => {console.log(e),(e) => {console.log(e)}})
在弹出授权的窗口中，选择禁止！可以看到返回的的错误信息。
错误代码
- Permission denied - 用户不允许地理定位
- Position unavailable - 无法获取当前位置
- Timeout - 操作超时
结合成功回调和异常回调
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
// 成功回调
function success(pos) {
var crd = pos.coords;
console.log('位置信息:');
console.log('Latitude : ' + crd.latitude);
console.log('Longitude: ' + crd.longitude);
};
// 失败回调
function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
};
navigator.geolocation.getCurrentPosition(success, error, options);
在前端打印navigator.geolocation对象的时候，发现还有其他两个方法：watchPosition()和clearWatch()。
返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
语法
id = navigator.geolocation.watchPosition(success, error, options)
参数
success
成功时候的回调函数， 同时传入一个 Position对象当作参数。
error 可选
失败时候的回调函数，可选， 会传入一个 PositionError对象当作参数。
options 可选
一个可选的 PositionOptions 对象。
停止 watchPosition() 方法
语法
navigator.geolocation.clearWatch(id);
参数
id
Geolocation.watchPosition()返回的 ID 数字。var id, target, option;
// 成功回调
function success(pos) {
var crd = pos.coords;
if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
console.log('到达目的地！');
navigator.geolocation.clearWatch(id);
}
};
// 错误处理
function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
};
// 目标经纬度
target = {
latitude : 0,
longitude: 0,
}
options = {
enableHighAccuracy: false,
timeout: 5000,
maximumAge: 0
};
id = navigator.geolocation.watchPosition(success, error, options);
Geolocation的三个最基本的方法getCurrentPosition、clearWatch、watchPosition需要记住哈！
重构前端知识体系，你要一起吗？
HTML历史：【HTML】你还会来看HTML吗？带你重温亦或走进
HTML标签：【HTML】带你重忆HTML那些记忆模糊的标签
HTML视频：【HTML】讲讲HTML5视频播放的方式
HTML音频：【HTML】HTML5给网页音频带来的变化
HTML语义化：【HTML】讲讲对HTML5的语义化的理解
HTML定位：【HTML】HTML5的新特性Geolocation
HTML拖放：【HTML】HTML5的拖放你用了吗
HTML缓存：【HTML】不来看看HTML5的WebStorage吗
HTML应用缓存：【HTML】HTML5的应用程序缓存
HTML的Web Werkors：【HTML】HTML5的Web Werkors
文章所涉及的部分资料来自互联网整理，其中包含自己个人的总结和看法，分享的目的在于共建社区和巩固自己。
引用的资料如有侵权，请联系本人删除！
感谢万能的网络，W3C，菜鸟教程等！
如果你感觉对你有帮助的话，不妨给我点赞鼓励一下，好文记得收藏哟！关注我一起成长！
幸好我在，感谢你来！