博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

html5---获取地理位置信息

Posted on 2013-05-18 16:40  Amy-lover  阅读(371)  评论(0)  编辑  收藏  举报

一、html5中，window.navigation对象新增了geolocation属性

该属性有三个方法getCurrentPosition获取用户当前的地理位置信息；watchPosition方法定期自动获取用户当前的地理位置信息；clearWatch方法停止对当前用户的地理位置信息的监视 getCurrentPosition(onSuccess,onError,options)参数onSuccess当获取当前地理信息成功时所执行的回调函数，onError当获取当前地理信息失败时所执行的回调函数，options为一些可选属性的列表

navigator.geolocation.getCurrentPosition(function(position){//获取地理位置信息成功时的回调函数
    //position对象的一些属性
    document.writeln("当前地理信息的纬度:"+position.coords.latitude);//当前地理信息的纬
    document.writeln("当前地理信息的经度:"+position.coords.longitude);
    document.writeln("当前地理信息的海拔高度:"+position.coords.altitude);
    document.writeln("获取到的经度和纬度的精度:"+position.coords.accuracy);
    document.writeln("获取到的海拔高度的精度:"+position.coords.altitudeAccurancy);
    document.writeln("设备前进的方向，用面朝正北方向的顺时针旋转的角度:"+position.coords.heading);
    document.writeln("设备前进的速度:"+position.coords.speed);
    document.writeln("获取地理位置信息的时间:"+position.coords.timestamp);
},function(error){//获取地理位置信息失败时的回调函数
    switch(error.code){
        case 1:alert("1用户拒绝获取其地理位置信息");break;
        case 2:alert("2获取不到用户的地理位置信息");break;
        case 3:alert("，3获取地理位置信息超时");break;
    }        
},{enableHighAccuracy:true,//是否要求高精度的地理位置信息
    timeout:5000,//对地理位置信息获取设置一个超时限制，单位是毫秒
    maximumAge:5000//对地理位置信息进行缓存的有效时间，单位是毫秒
    });

 

二、使用google地图

　　2.1 导入google map api脚本文件

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

 

　　2.2 获取当前的地理位置信息

navigator.geolocation.getCurrentPosition(function(position){//获取地理位置信息成功时的回调函数
        //position对象的一些属性
        var coords=position.coords;
。。。。。。。。
}

 

　　2.3 利用2.2中获取到的当前地理位置的信息指定google地图的坐标点

var latlng=new google.maps.LatLng(coords.latitude,coords.longitude);//指定该点的横纵坐标

 

　　2.4 指定该地图的某些参数

var myOptions={
            zoom:10,//放大的倍数
            center:latlng,//将图片的中心设置为该点
            mapTypeId:google.maps.MapTypeId.ROADMAP//指定地图的类型
            };

　　2.5 创建地图

　　　　　var map1;
        map1=new google.maps.Map(document.getElementById("map"),myOptions);//创建地图

 

　　2.6 创建标记位置

var marker=new google.maps.Marker({//在地图上创建标记
            position:latlng,
            map:map1
        });

 

　　2.7 创建标注窗口，并打开

　　　　var informationWindow=new google.maps.InfoWindow({//创建注释窗口，并设定注释窗口的显示内容
            content:"当前位置！"
        });
        informationWindow.open(map1,marker);//标注窗口
        });

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function init(){
        navigator.geolocation.getCurrentPosition(function(position){//获取地理位置信息成功时的回调函数
        //position对象的一些属性
        var coords=position.coords;
        var latlng=new google.maps.LatLng(coords.latitude,coords.longitude);//指定该点的横纵坐标
        var myOptions={
            zoom:10,//放大的倍数
            center:latlng,//将图片的中心设置为该点
            mapTypeId:google.maps.MapTypeId.ROADMAP//指定地图的类型
            };
        var map1;
        map1=new google.maps.Map(document.getElementById("map"),myOptions);//创建地图
        var marker=new google.maps.Marker({//在地图上创建标记
            position:latlng,
            map:map1
        });
        var informationWindow=new google.maps.InfoWindow({//创建注释窗口，并设定注释窗口的显示内容
            content:"当前位置！"
        });
        informationWindow.open(map1,marker);//标注窗口
        });
    }
</script>
</head>

<body onLoad="init();">
    <div id="map" style="width:400px; height:400px"></div>
</body>
</html>