HTML5地理定位 Geolocation API

使用getCurrentPosition方法来取得用户当前的地理位置信息,该方法的定义如下所示。

void getCurrentPosition(onSuccess,onError,options);
第一个参数为获取当前地理位置信息成功时所执行的回调函数;
第二个参数为获取当前地理位置信息失败时所执行的回调函数;
第三个参数为一些可选属性的列表。
注意:其中第二、三个参数为可选属性。

getCurrentPosition方法中的第一个参数

getCurrentPosition方法中的第一个参数为获取当前地理位置
信息成功时所执行的回调函数。该参数的使用方法如下所示。
navigator.geolocation.getCurrentPosition(function(position)){
//获取成功时的处理
}
在获取地理位置信息成功时执行的回调函数中,用到了一个参数
position,它代表的是一个position对象。

getCurrentPosition方法中的第二个参数

getCurrentPosition方法中的第二个参数为获取当前地理位
置信息失败时所执行的回调函数。如果获取地理位置信息失败,
你可以通过该回调函数把错误信息提示给用户。当在浏览器中打
开使用了Geolocation API来获得用户当前位置信息的页面时,
浏览器会询问用户是否共享位置信息。
如果在该画面中拒绝共享的话,也会引起错误的发生。
该回调函数使用一个error对象作为参数,该对象具有以下两个
属性:
Code属性
Code属性为以下三个值其中之一:
用户拒绝了位置服务(属性值为1)
获取不到位置信息(属性值为2)
获取信息超时错误(属性值为3)
Message属性
message属性为一个字符串,在该字符串中包含了错误信息,
这个错误信息在开发和调试时将很有用。但是需要注意的是有些
浏览器是不支持message属性的,譬如Firefox3.6以上。

getCurrentPosition方法中的第二个参数应用

    //在getCurrentPosition方法中使用第二个参数来捕获错误信息的具体使用方法如下所示。
navigator.geolocation.getCurrentPosition(
	function(position)){
		var coords = position.coords;
    	showMap(coords.latitude,coords.longitude,coords.accuracy);
	},
    //捕获错误信息
    function(error){
    	var errorTypes = {
             1:'位置服务被拒绝',
             2:'获取不到位置信息',
             3:'获取信息超时'
    	};
    	alert(errorTypes[error.code]+":,不能确定你的当前地理位置");
    }
};

getCurrentPosition方法中的第三个参数

getCurrentPosition方法中的第三个参数可以省略,它是一些
可选属性的列表,这些可选属性如下。
enableHighAccuracy(布尔型,默认为false)
是否要求高精度的地理位置信息,这个参数在很多设备上设
置了都没用,因为使用在设备上时需要结合设备电量、具体地理
情况来结合考虑。因此,多数情况下把该属性设为默认,由设备
自身来调整。
timeout(单位为毫秒,默认值为infinity/0)
对地理位置信息的获取操作做一个超时限制(单位为毫秒)
。如果在该时间内未获取到地理位置信息,则返回错误。
maximumAge(单位为毫秒,默认值为0)
对地理位置信息进行缓存的有效时间(单位为毫秒)。例如
maximumAge:120000(1分钟是60000)。如果11点整得
时候获取过一次地理位置信息,11:01的时候,再次调用
navigator.geolocation.getCurrentPosition重新获取地理位
置信息,则返回的依然为11:00时的数据(因为设置的缓存有效
时间为2分钟)。超过这个时间后缓存的地理位置信息被废弃,
尝试重新获取地理位置信息。如果该值被指定为0,则无条件重
新获取新的地理位置信息。

navigator.geolocation.getCurrentPosition(
	function(position)){
		//获取地理位置信息成功时所做处理
	},
    function(error){
    	//获取地理位置信息失败时所做处理
    },
    	//以下为可选属性
    {
        //设置缓存有效时间为2分钟
        maximumAge:60*1000*2,
        //5秒钟内获取到地理位置信息则返回错误
        timeout:5000
     }
};

持续监视当前地理位置的信息

使用watchPosition方法来持续获取用户的当前地理位置信
息,它会定期地自动获取,该方法定义如下所示。
int watchCurrentPosition(onSuccess,onError,options);
该方法三个参数的说明与使用方法与getCurrentPosition方
法的参数说明与使用方法相同。该方法返回一个数字,这个数字
的使用方法与Javascript脚本中setInterval方法的返回参数的
使用方法类似,可以被clearWatch方法使用,停止对当前地理
位置信息的监视。

停止获取当前用户的地理位置信息

使用该方法可以停止对当前用户的地理位置信息的监视。该
方法定义如下所示。
void clearWatch(watchId);
该方法的参数为调用watchCurrentPosition方法监视地理位
置信息时的返回参数。

    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
    <title>获取地理位置的经度和纬度</title>  
    </head>  
    <body>  
    <p id="geo_loc"><p>
    <script>    
      function getElem(id) {  
           return typeof id === 'string' ? document.getElementById(id) : id;  
       }  
           
        function show_it(lat, lon) {  
            var str = '您当前的位置,纬度:' + lat + ',经度:' + lon;  
           getElem('geo_loc').innerHTML = str;  
        }  
          
       if (navigator.geolocation) {  
           navigator.geolocation.getCurrentPosition(function(position) {    
               show_it(position.coords.latitude, position.coords.longitude);    
           }, function(err) {  
               getElem('geo_loc').innerHTML = err.code + "\n" + err.message;  
           });  
       } else {  
           getElem('geo_loc').innerHTML = "您当前使用的浏览器不支持Geolocation服务";  
       }  
    </script>   
    </body>  
    </html>  
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?