HTML5获取用户位置信息

利用HTML5中新增的Geolocation API可以获取用户的位置信息。

由于位置信息属于隐私信息,所以必须得到用户批准,此功能才可用。

在一些具有GPS的设备上,比如iPhone,获取的位置信息是更准确的。

支持Geolocation的浏览器最低版本

API Chrome IE Firefox Safari Opera
Geolocation 5.0-49.0(http)

50.0(https)

9.0 3.5 5.0 16.0

从Chrome 50开始,Geolocation API就只能由https网站调用,如果你的网站是http的,则无法再获取用户位置。(网站的https化是比较重要的内容,此处标记)

使用HTML Geolocation

getCurrentPosition()方法用于返回用户位置,下面这个例子用来返回用户位置的纬度(latitude)和经度(longitude):

<p>点击显示坐标</p>

<button onclick="getLocation()">点击</button>

<p id="demo"></p>

<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 + 
    "<br>经度: " + position.coords.longitude;
}
</script>

首先检测浏览器是否支持Geolocation;

如果浏览器支持,则调用getCurrentPosition()方法,否则,显示提示信息;

如果getCurrentPosition()方法调用成功,则返回一个坐标对象给第一个参数(即函数showPosition)。

showPosition()方法输出经纬度。

增加错误处理

上例非常基础,没有错误处理,实际上,getCurrentPosition()可以有两个参数,第二个参数就是用来处理错误的,它指定一个当无法获取用户位置时调用的处理函数。

程序变为:

<p>点击显示坐标</p>

<button onclick="getLocation()">点击</button>

<p id="demo"></p>

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

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } 
    else { 
        x.innerHTML = "你的浏览器不支持Geolocation。";
    }
}

function showPosition(position) {
    x.innerHTML = "纬度: " + position.coords.latitude + 
    "<br>经度: " + position.coords.longitude;
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "获取权限失败。"
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "无法获取用户信息。"
            break;
        case error.TIMEOUT:
            x.innerHTML = "请求超时。"
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "未知错误。"
            break;
    }
}
</script>

以地图形式呈现位置信息

如果希望以地图形式呈现位置信息,则需要使用地图服务,比如谷歌地图,下例中,函数返回的经纬度将用来呈现该地点地图(以静态图像形式)。

<p id="demo">点击显示坐标</p>

<button onclick="getLocation()">点击</button>

<p id="mapholder"></p>

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

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } 
    else { 
        x.innerHTML = "你的浏览器不支持Geolocation。";
    }
}

function showPosition(position) {
 var latlon = position.coords.latitude + "," + position.coords.longitude;

 var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
 +latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
 document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
//获取API 密钥详情参看:http://www.icoder.top/blog/index.php/2017/05/31/html_googlemaps/

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "获取权限失败。"
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "无法获取用户信息。"
            break;
        case error.TIMEOUT:
            x.innerHTML = "请求超时。"
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "未知错误。"
            break;
    }
}
</script>

getCurrentPosition()方法返回的数据

如果该方法调用成功,则会返回一个对象,latitude、longitude与accuracy属性总会被返回的,其他属性如果有的话才能返回。

(如果有则返回)​

属性 返回
coords.latitude 纬度,十进制数 (总是被返回)
coords.longitude 经度,十进制数 (总是被返回)
coords.accuracy 位置精度 (总是被返回)
coords.altitude 海拔(如果有则返回)
coords.altitudeAccuracy 海拔精度(如果有则返回)
coords.heading 当前移动的角度方向,相对于正北方向顺时针计算(如果有则返回)
coords.speed 速度(m/s)(如果有则返回)
timestamp 时间戳(如果有则返回)

Geolocation对象其他有趣的方法

除了getCurrentPosition()方法之外,Geolocation对象还有其他有趣的方法:

watchPosition()——返回用户当前位置并实时更新。

clearWatch()——停止跟踪用户位置(停止watchPosition()方法)。

下例展示了watchPosition()方法,需要GPS设备来测试此例(比如iPhone):

<p>点击显示坐标</p>

<button onclick="getLocation()">点击</button>

<p id="demo"></p>

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

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } 
    else { 
        x.innerHTML = "您的浏览器不支持地理定位。";
    }
}

function showPosition(position) {
    x.innerHTML = "纬度: " + position.coords.latitude + 
    "<br>经度: " + position.coords.longitude;
}
</script>
发帖时间: web