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

一、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>

 

 

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(html5)