介绍
本文将简述一下如何通过HTML5和百度地图开放平台提供的API来实现对浏览器的定位,同时记录了遇到的问题和解决方案。实现效果为显示出用户所在的省市,即: XXX省 XXX市。
实现思路
利用HTML5 提供的API获取到用户的经纬度信息,再将用户的经纬度信息传到百度地图开放平台,百度地图开放平台根据提供的坐标信息返回当前的省市。
兼容性及依赖
兼容性:Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 都支持Geolocation(地理定位).
依赖:不依赖于任何库和框架
HTML5 API
使用HTML5 Geolocation API的getCurrentPosition() 方法能够获取用户的经纬度信息。
getCurrentPosition()常用参数有两个,一个是成功时执行,一个时错误处理。如果getCurrentPosition()运行成功,则向第一个参数中规定的函数返回一个coordinates对象,用于提供位置信息。
coordinates对象属性如下:
属性 | 描述 |
---|---|
coords.latitude | coords.latitude 十进制数的纬度 |
coords.longitude | 十进制数的经度 |
coords.accuracy | 位置精度 |
coords.altitude | 海拔,海平面以上以米计 |
coords.altitudeAccuracy 位置的海拔精度 | |
coords.heading | 方向,从正北开始以度计 |
coords.speed | 速度,以米/每秒计 |
timestamp | 响应的日期/时间 |
其中,latitude、longitude 以及 accuracy 属性 是固定返回的属性,其他属性在可用状态下才会一起返回。
如果getCurrentPosition()运行失败,则向第二个参数中规定的函数返回一个error对象,用于提供错误信息。
属性 | 描述 |
---|---|
code | 1: PERMISSION_DENIED,用户不允许地理定位 2: POSITION_UNAVAILABLE,无法获取当前位置 3:TIMEOUT,操作超时 |
message | 返回相应的错误信息 |
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else
{
console.log("该浏览器不支持获取地理位置。");
}
}
function showPosition(position)
{
console.log("纬度: " + position.coords.latitude +
" 经度: " + position.coords.longitude);
}
function showError(error) {
console.log(error);
}
坑:一旦用户拒绝,就再也调不起来授权面板了