Html入门教程:25.html5-地理位置(缺API)



地理位置

navigator.geolocation用于获取基于浏览器的当前用户地理位置API

浏览器支持

首先,该特性可能侵犯用户的隐私,需要用户同意,否则用户位置信息是不可用的。
其次,浏览器支持需要检测:

if (navigator.geolocation) {
    //console.log("浏览器支持!");
}
else {
    // console.log("浏览器不支持!");
}

获取位置

navigator.geolocation提供了3个方法:

1.getCurrentPosition(success,error,{options})
获取用户当前位置

2.watchCurrentPosition(success,error,{options})
持续性获取,监视当前用户位置(回调函数会被调用多次)

3.clearWatch(watchId)
取消监控,watchId 为watchCurrentPosition返回的ID值

参数

success
表示方法成功时候的回调函数,返回position对象,通过这个对象可以获取地理位置的相关信息。
position对象的属性:

coords.latitude	    

表示十进制数的纬度

coords.longitude	

表示十进制数的经度

function Success(position){
    console.log(position.coords.latitude);
    console.log(position.coords.longitude);
}

error
表示方法失败时候的回调函数,返回error对象,通过这个对象返回错误类型。
error对象的Code属性代表错误类型的代码:

function error(error){
    switch(error.code){
        case error.PERMISSION_DENIED:
        alert("用户拒绝对获取地理位置的请求");
        break;

        case error.POSITION_UNAVAILABLE:
        alert("位置信息是不可用的");
        break;

        case error.TIMEOUT:
        alert("请求用户地理位置超时");
        break;

        case error.UNKNOWN_ERROR:
        alert("未知错误");
        break;
        }
}

**{options}**的键值对包括:
1.enableHighAccuracy
指示浏览器获取高精度的位置,默认为false,即getCurrentPosition() 会尽快返回一个低精度结果

enableHighAccuracy:true,

2.timeout
指定获取地理位置的超时时间,默认不限时,单位为毫秒

timeout: 5000,

3.maximumAge
位置缓存的最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。

maximumAge: 2000

总体:

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(Success, Error,{enableHighAccuracy: true,timeout: 5000,maximumAge: 2000});
}else{
    alert("您的浏览器不支持定位,请使用更高级的浏览器!");
}

地图API

地图生成器

百度地图生成
高德地图生成


上一篇: 24.html5绘图-svg元素 下一篇: 26.html5-拖放