HTML5 地理定位

HTML5地理定位API是用来获得用户的地理位置。
因为用户的地理位置信息是用户个人的隐私，所以必须获得用户的同意，该API才能有效。

具有GPS定位的设备提供的定位会更加准确，如iPhone

浏览器兼容性

下面列出的是各类型浏览器支持H5地理定位API的最低版本。

API
地理定位 Geolocation	5.0 - 49.0 (http) 50.0 (https)	9.0	3.5	5.0	16.0

从Chrome 50.0版本开始，地理定位API只会在HTTPS下有效。这是对用户隐私的保护，HTTP网站的传输过程中很容易被监听到。因此Google从Chrome的50.0版本开始，只在HTTPS的情况下，才会让地理定位API正常工作。

在HTML5中使用Geolocation（地理定位）

通过getCurrentPosition()方法可以获得用户的地理位置信息（经纬坐标）
Talk is cheap，show you the code.

<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        alert( "亲，该设备上的浏览器不支持地理定位~" );
    }
}

function showPosition(position) {
    var infoPosition = "纬度：" + position.coords.latitude + 
    " 经度：" + position.coords.longitude;
    alert( infoPosition );
}
</script>

运行一下

代码解析：

• if (navigator.geolocation) 这句是在检查是否支持地理定位API；
• 如果支持，则通过 getCurrentPosition() 获得地理位置信息；如果不支持，就提示用户一下该功能不支持；
• 如果定位成功的话，则会运行定位成功的回调函数 showPosition 函数；定位这个事情是需要花时间的，一般要等几秒；另外，如果上述案例测试不成功，可以试着换一个浏览器试试，chrome浏览器对该功能的应用已经更加严格了，毕竟涉及用户隐私；另外大部分的笔记本电脑与台式电脑从硬件上来说是没有定位模块的，所以很可能调用失败，Macbook相对会好一些，应该可以定位成功的；
• 在 showPosition() 函数里可以设置如何展示定位结果中的经纬坐标，函数内部是可以自由设计的，可以alert出来，也可以console.log的方式输出；以及showPosition这个函数的名称是可以随便起名的，只要getCurrentPosition()把预设的回调函数名传参进去即可，例如也可以起名为fuck_postion函数，预设好就ok啦，getCurrentPosition( fuck_position )即可。

上面的这个例子是相对单纯简单地展示了如何使用HTML5地理定位，下面会逐步介绍如何处理调用API失败。

---

处理API调用失败

其实很简单，getCurrentPosition()的第二个形参就是处理API调用失败的回调函数。处理API调用失败的回调函数，如下例所示：

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            alert( "用户拒绝使用地理定位！" );
            break;
        case error.POSITION_UNAVAILABLE:
            alert( "靠！定位信息不可用啊！" );
            break;
        case error.TIMEOUT:
            alert( "靠！请求地理定位API超时！" );
            break;
        case error.UNKNOWN_ERROR:
            alert( "天啊！未知错误类型！" );
            break;
    }
}

运行一下

在地图上显示定位结果

利用高德地图提供的API来在高德地图上展示出定位的结果：把经度坐标和纬度坐标分别填入下方的url地址中，然后跳转到该url地址，即可在高德地图中展示这个位置点。

https://uri.amap.com/marker?position=<longitude>,<latitude>

运行一下

HTML5地理定位的应用场景

HTML5地理定位有很多应用场景：比如汽车导购网站可以直接精准显示当地的经销商信息、基于LBS的YP应用、导航等。

getCurrentPosition()方法的返回结果

倘若定位成功，getCurrentPosition()方法则会返回一个对象，这个对象具有经度、纬度、精准度等属性。

属性	说明
coords.latitude	以十进制数字的方式显示纬度（通常结果都有）
coords.longitude	以十进制数字的方式显示经度（通常结果都有）
coords.accuracy	定位的精准级别（通常结果都有）
coords.altitude	海拔高度（如果有则返回）
coords.altitudeAccuracy	海拔传感的精准级别（如果有则返回）
coords.heading	水平指向上的方向度数（以正北方向为基准）（如果有则返回）
coords.speed	速度（m/s）（如果有则返回）
timestamp	返回结果时的时间日期（如果有则返回）

Geolocation对象的其他方法

Geolocation对象还有一些其他有趣的方法：

• watchPosition() 实时返回用户设备所在位置，只要用户位置发生改变，则会触发回调函数以返回结果；
• clearWatch() 停止对象正在进行的watchPosition()方法。

如下例所示，但这个例子最好用iphone来测试，当然也可以稍微移动一下macbook笔记本来测试，贫道就是抱着macbook笔记本电脑左右移动来测试的，能测试成功的。

<script>
var x = document.getElementById("demo");
var times = 0;

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else { 
        x.innerHTML = "呵呵，小贼，你的浏览器太过时了，不兼容";}
    }

function showPosition(position) {
    times += 1; // 记录是第几次进行回调，方便看出效果
    x.innerHTML="这是第" + times.toString() + "次返回结果<br>纬度：" + position.coords.latitude + 
    "<br>经度：" + position.coords.longitude;
}
</script>

运行一下