HTML5 geolocation API的用法

2024-12-02 来源：个人技术集锦

Geolocation API用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允许” or “拒绝”。

先看看哪些浏览器支持Geolocation API：
IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+
也就是说除IE6~IE8外，其它最新的浏览器基本上都支持，包括最新的移动手机。
Geolocation API存在于navigator对象中，只包含3个方法：
1、getCurrentPosition
2、watchPosition
3、clearWatch
getCurrentPosition、watchPosition的参数说明，示例：
navigator.geolocation.getCurrentPosition(success_callback, error_callback, {geolocation选项});
第一个参数是用户允许浏览器共享geolocation成功后的回调方法
第二个参数是用获取地理位置信息失败的处理方法，传入错误对象，包含code、message两个属性
第三个参数都是geolocation选项，所有的geolocation选项都是可选的，它包含的属性如下：
enableHighAccuracy(Boolean型，默认为false，是否尝试更精确地读取纬度和经度，移动设备上，这可能要使用手机上的GPS，这会消耗移动设备更多的电量)
timeout(单位为毫秒，默认值为0，在放弃并触发处理程序之前，可以等待的时间----用户选择期间是不计时的)
maximumAge(单位为毫秒，默认值为0。用来告诉浏览器是否使用最近缓存的位置数据，如果在maximumAge内有一个请求，将会返回它，而不请求新位置。 maximumAge如果为Infinity，则总是使用一个缓存的位置，如果为0则必须在每次请求时查找一个新位置)。

<html>
<head>
    <meta http-equiv="Content-Type" contentType="text/html; charset=UTF-8" %>
    <title>HTML5 物理定位</title>
    <script type="text/javascript">
        window.onload=function(){
            var options={
                enableHighAccuracy:true,
                maximunAge:1000,
                timeout:45000
            };
            if(window.navigator.geolocation){
                navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);
            }else{
                alert("你的浏览器不支持定位!");
            }
        }
        function successCallback(position){
            var output="";
            output +="Your position has bean located . \r\n";
            output+=" Latitude:"+position.coords.latitude+" ";
            output+=" Longitude:"+position.coords.longitude+" ";
            output+=" Accuracy :"+position.coords.accuracy +" meters";
            if(position.coords.latitude){
                output+=" Accuracy :"+position.coords.altitudeAccuracy +" meters";
            }
            if(position.coords.heading){
                output+=" Heading :"+position.coords.Heading +" meters";
            }
            if(position.coords.speed){
                output+=" Speed :"+position.coords.Speed +" m/s";
            }
            output+=" Time of Position "+position.timestamp +" m/s";
            alert(output);
        }
        function errorCallback(error){
            switch(error.code){
                case error.PERMISSION_DENIED:
                    alert("you have denied access to your position .");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("there was a problem getting yout position .");
                    break;
                case error.TIMEOUT:
                    alert("The application has timed out attempting to get your location .");
                    break;

            }
        }
    </script>
</head>
<body >

</body>
</html>

上面的例子中，只使用了success_callback中的纬度(latitude)和经度(longitude)，成功后回调获取用户位置数据position，它包含两个属性：coords、timestamp。
coords属性有7个值，包含上面用到的纬度、经度。
1、accuracy 准确角
2、altitude 海拔高度
3、altitudeAcuracy 海拔高度的精确度
4、heading 行进方向
5、speed 地面的速度
根据获得的纬度与经度，很容易将用户的位置在google地图中显示出来，如下例所示：

核心的javascript脚本：

在google地图+HTML5定位个人位置

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>google GEO 物理定位 </title>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script>
        function getElem(id) {
            return typeof id === 'string' ? document.getElementById(id) : id;
        }
        function success(position) {
            var mapcanvas = document.createElement('div');
            mapcanvas.id = 'mapcanvas';
            mapcanvas.style.height = '100%';
            mapcanvas.style.width = '100%';
            getElem("map_canvas").appendChild(mapcanvas);
            var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var myOptions = {
                zoom: 15,
                center: latlng,
                mapTypeControl: false,
                navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title:"你在这里！"
            });
        }
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(success);
        } else {
            alert("您当前使用的浏览器不支持geolocation服务");
        }
    </script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>

watchPosition像一个追踪器，与clearWatch成对。watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。
var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);
navigator.geolocation.clearWatch(watchPositionId );

利用百度+HTML5定位个人位置：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset='utf-8'>
    <title>百度地图</title>
    <script type='text/javascript' src='http://api.map.baidu.com/api?v=1.3'></script>
    <script type='text/javascript'>

        function getLocation()
        {
            if(navigator.geolocation){
                navigator.geolocation.getCurrentPosition(showMap, handleError, {enableHighAccuracy:true, maximumAge:1000});
            }else{
                alert('您的浏览器不支持使用HTML 5来获取地理位置服务');
            }
        }

        function showMap(value)
        {
            var longitude = value.coords.longitude;
            var latitude = value.coords.latitude;
            var map = new BMap.Map('map');
            var point = new BMap.Point(longitude, latitude);    // 创建点坐标  
            map.centerAndZoom(point, 15);
            var marker = new BMap.Marker(new BMap.Point(longitude, latitude));  // 创建标注  
            map.addOverlay(marker);              // 将标注添加到地图中  
        }

        function handleError(value)
        {
            switch(value.code){
                case 1:
                    alert('位置服务被拒绝');
                    break;
                case 2:
                    alert('暂时获取不到位置信息');
                    break;
                case 3:
                    alert('获取信息超时');
                    break;
                case 4:
                    alert('未知错误');
                    break;
            }
        }

        function init()
        {
            getLocation();
        }

        window.onload = init;

    </script>
</head>

<body>
<div id='map' style='width:600px;height:600px;'></div>
</body>
</html>

显示全文

全部栏目

HTML5 geolocation API的用法