通过geolocation API来获得地理信息的实例

在geolocation来获取个人的地理信息,这是html5里面提供的一个非常实用的API,通过它我们可以获得当前用户的地理信息,这个API最主要的方法是 void getCurrentPosition(onSuccess,onError,options); //

这里面有三个参数,第一个是获取信息之后的处理函数,第二个是获取信息失败的回调函数,第三个是相关的参数的设置,主要有三个 ,一个enableHightAccuracy这是要求高精度来显示用户的地理信息位置,第二个是timeout,这个是设置,获取地理信息超时的时间,单位是毫秒,第三个是maximumAge这个是对地理信息缓存的时间,在指定的时间内刷新页面,数据还是之前的。

例如://这个是获得你的当前的地理信息
function get_location(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(show_map/*这是成功获取信息之后执行的函数*/,handle_error/*这个是获取信息失败之后的函数*/,{enableHighAccuracy:true/*是不是高精度来显示地理信息*/,maximumAge/*这个是更新地理信息的时间*/:0,timeout:10000/*这是获取地理信息超时的时间,单位是毫秒*/});
}else{
alert(“您的浏览器不支持html5″);
}
}

输入代码:

———————————————————————————————————————-

<!DOCTYPE HTML>
<html>
<head>
<title>使用html5实现拖动</title>
<meta charset=”UTF-8″/>
<script type=”text/javascript”>
//这个函数显示成功获取个人的地理信息的循环显示所有的信息
function showObject(obj,k){//从
for(var i in obj){
if(typeof(obj[i])!=”object”||obj[i]==null){//如果不是对象或者这个不为空的话,就显示
for(var j=0;j<k;j++){
document.write(“&nbsp;&nbsp;&nbsp;”);
}
document.write(i+”:”+obj[i]+”<br/>”);
}else{
//如果是对象的话,迭代输出
document.write(i+”:”+”<br/>”);
showObject(obj[i],k+1);
}
}
}
//这个是获得你的当前的地理信息
function get_location(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(show_map/*这是成功获取信息之后执行的函数*/,handle_error/*这个是获取信息失败之后的函数*/,{enableHighAccuracy:true/*是不是高精度来显示地理信息*/,maximumAge/*这个是更新地理信息的时间*/:0,timeout:10000/*这是获取地理信息超时的时间,单位是毫秒*/});
}else{
alert(“您的浏览器不支持html5″);
}
}
//处理错误的信息
function handle_error(){
switch(err.code){
case 1:
alert(“地理信息被拒绝”);
break;
case 2:
alert(“暂时找不到地理位置”);
break;
case 3:
alert(“获取地理信息超时”);
break;
default:
alert(“位置错误”);
break;
}
}
function show_map(position){
var latitude=position.coords.latitude;
var longitude=position.coords.longitude;
showObject(position,0);
}
get_location();
</script>
</head>

<body>
<center>
<div id=”map” style=”width:400px;height:400px;background-color:green;”>这个是获取地理信息的演示</div>
</center>
</body>
</html>

——————————————————————————————————————

效果截图:

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/dili.htm

共有 0 条评论

Top