HTML5地理定位的学习体验
本帖最后由 不二如是 于 2020-3-17 18:57 编辑为了准备《零基础入门学习Web开发》（H5 & C3）的课程，提前温习一下H5的定位操作，主课程会由小甲鱼老师来讲哈。
通过网页端定位主要用于下面三个实际场景：
**** Hidden Message *****
请求一个位置信息，如果用户同意，浏览器就会返回位置信息，该位置信息是通过支持 HTML5 地理定位功能的底层设备提供给浏览器。
位置信息由纬度／经度坐标和一些其他的元数据组成（如上图所示）。
有了这些位置信息就可以构建引人注意目的位置感知类应用程序。
简单感受
一段代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="鱼C工作室|免费编程视频教学|Python教学|Web开发教学|全栈开发教学|C语言教学|汇编教学|Win32开发|加密与解密|Linux教学">
<meta name="description" content="鱼C工作室为大家提供最有趣的编程视频教学。">
<meta name="author" content="鱼C工作室">
<title>鱼C-定位</title>
</head>
<body>
<p id="demo">点击下方按钮，获得鱼油的经纬度坐标：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="鱼油使用的浏览器不支持定位哦";}
}
function showPosition(position)
{
x.innerHTML="当前位置为:"+"纬度=" + position.coords.latitude +
" 经度=" + position.coords.longitude;
}
</script>
</body>
</html>
直接将上面的源代码拷到本地，保持联网，用Chrome打开，单击按钮，会看到目前鱼油所处的经纬度。
好了，让我们来好好学习一下Geolocation
Geolocation
先来看一下兼容性：
嗯，基本上主流浏览器都支持哈。
主要有两个核心的定位请求API：
单次定位请求、重复性的位置更新请求
3个方法：
getCurrentPosition() 、watchPosition()、clearWatch()
最核心的就是getCurrentPosition() 方法，这个方法会返回几个参数（置顶图）。
最上面的图很重要，先来翻译一下：
属性 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，从正北开始以度计
coords.speed 速度，以米/每秒计
timestamp 响应的日期/时间
1、getCurrentPosition（）
获取用户当前定位位置，这会异步地请求获取用户位置，并查询定位硬件来获取最新信息。
创建很简单，上方代码中：
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
如果浏览器支持定位，则调用getCurrentPosition()获取当前位置信息。
如果不支持输出一个文本提醒鱼油的浏览器不支持定位。
需要注意的是：
有 GPS 的设备可能需要一分钟或更久来获取 GPS 定位，在这种情况下 getCurrentPosition() 会返回低精度数据（基于 IP 的定位或 Wi-Fi 定位）。
2、watchPosition（）
我们可以设定一个回调函数来响应定位数据发生的变更（设备发生了移动，或获取到了更高精度的地理位置信息）。
它与 getCurrentPosition() 接受相同的参数，但回调函数会被调用多次。
错误回调函数与 getCurrentPosition() 中一样是可选的，也会被多次调用。
3、clearWatch（）
watchPosition() 函数会返回一个 ID，唯一地标记该位置监视器。
我们可以将这个 ID 传给 clearWatch() 函数来停止监视用户位置：
navigator.geolocation.clearWatch(watchID);
定位原理
上面已经从“应用层面”上介绍了，Geolocation的玩法。
肯定会有好奇的鱼油问：
浏览器是如何实现定位的呢，原理又是如何？
很棒的问题哦，让我们更进一步了解H5定位的本质。
浏览器通过4个纬度来进行定位：
IP定位、GPS定位、Wi-Fi三角测量定位、基地台三角测量定位
这些东西有的比较难懂，如果希望更深层次了解的鱼油，自行科普搜索把，结下来，我只是简单介绍一下。
1、IP 定位
每一台连上网路的电脑都具有一个独一无二的 IP 位址，经由 IP 位址可以反查出电脑位置。
但是结果并不精确，而且很容易到受到 ISP 的 IP 分配机制影响，而造成误差。
2、GPS 定位
GPS 是我们最常听到的定位技术，它是利用卫星来定位，可以很精确的侦测到使用者位置。
但是要玩 GPS，行动装置一定要有 GPS 模组，而且尽管 GPS 非常精准，还是会有技术上的局限。
比如在侦测位置时，GPS 的感应器要位于视线范围内（line of sight），因此在有很多高楼大厦、或者是障碍物的地方，GPS 反而没有办法运作自如。
3、Wi-Fi 三角测量定位
这个定位技术可以说是为都会区而设的，因为热闹的大都市通常会有不少 Wi-Fi 热点，定位供应商可以根据这些热点的相对位置、距离等建立一个资料库。
Wi-Fi 三角测量适用于 GPS 无法渗透的地方，不过缺点是需要经常更新资料库。
4、基地台三角测量定位
借助基地台之间的相对位置，可以定位出用户在哪里，只要你的手机收得到讯号，就能定位。
综合来说这四种技术的准确性由高而低分别是：
GPS 定位、Wi-Fi 三角测量、基地台三角测量、IP定位。
但还是要视环境而定，比如你到没有 Wi-Fi 热点的地方、或是手机信号不好，定位效果当然也会受影响。
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
如果喜欢，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_278:} ） 学习学习 {:10_257:} 学习学习 比投入 {:10_277:} aaaaaaaaaaaaaaaaa
我我我我我我我我我我我我我
页:
[1]