利用HTML5中Geolocation获取地理位置在Google Map上定位

本小菜刚开始学习HTML5,现在对其中的Geolocation颇感兴趣,结合Google Map的API实现基本的地图定位功能。

1.获取当前地理位置

调用方法 void getCurrentPosition(onSuccess, onError, options);即可。

其中onSuccess是获取当前位置信息成功时执行的回调函数,onError是获取当前位置信息失败时所执行的回调函数,options是一些可选熟悉列表。其中第二和第三个参数为可选属性。

在onSuccess回调函数中,用到了参数position,代表一个具体的position对象,表示当前位置。其具有如下属性:

  • latitude:当前地理位置的纬度。
  • longitude:当前地理位置的经度。
  • altitude:当前位置的海拔高度(不能获取时为null)。
  • accuracy:获取到的纬度和经度的精度(以米为单位)。
  • altitudeAccurancy:获取到的海拔高度的经度(以米为单位)。
  • heading:设备的前进方向。用面朝正被方向的顺时针旋转角度来表示(不能获取时为null)。
  • speed:设备的前进速度(以米/秒为单位,不能获取时为null)。
  • timestamp:获取地理位置信息时的时间。

在onError回调函数中,用到了error参数。其具有如下属性:

  • code:错误代码,有如下值。
  1. 用户拒绝了位置服务(属性值为1);
  2. 获取不到位置信息(属性值为2);
  3. 获取信息超时错误(属性值为3)。
  • message:字符串,包含了具体的错误信息。

在options参数中,可选属性如下:

  • enableHighAccuracy:是否要求高精度的地理位置信息。
  • timeout:设置超时时间(单位为毫秒)。
  • maximumAge:对地理位置信息进行缓存的有效时间(单位为毫秒)。

其中注意要写上如下代码,判断浏览器是否支持HTML5获取地理位置信息,以兼容较早不支持的浏览器。

if (navigator.geolocation) {
    //获取当前地理位置信息 
    navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
 } else {
      alert("你的浏览器不支持HTML5来获取地理位置信息。");
}

 

 2.调用Google Map API获取当前位置信息

首先,需要在页面中引用Google Map API的脚本文件,导入方法如下所示。

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

其次,设定地图参数,设定方法如下所示。

//指定一个google地图上的坐标点,同时指定该坐标点的横坐标和纵坐标
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
   zoom: 14,    //设定放大倍数
   center: latlng,  //将地图中心点设定为指定的坐标点
   mapTypeId: google.maps.MapTypeId.ROADMAP //指定地图类型
};

最后,创建地图,并在页面中显示,创建方法如下所示。

//创建地图,并在页面map中显示
var map = new google.maps.Map(document.getElementById("map"), myOptions);

最后的最后,献上本次示例所有代码。代码如下所示。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>获取当前位置并显示在google地图上</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function init() {
            if (navigator.geolocation) {
                //获取当前地理位置
                navigator.geolocation.getCurrentPosition(function (position) {
                    var coords = position.coords;
                    //console.log(position);
                    //指定一个google地图上的坐标点,同时指定该坐标点的横坐标和纵坐标
                    var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
                    var myOptions = {
                        zoom: 14,    //设定放大倍数
                        center: latlng,  //将地图中心点设定为指定的坐标点
                        mapTypeId: google.maps.MapTypeId.ROADMAP //指定地图类型
                    };
                    //创建地图,并在页面map中显示
                    var map = new google.maps.Map(document.getElementById("map"), myOptions);
                    //在地图上创建标记
                    var marker = new google.maps.Marker({
                        position: latlng,    //将前面设定的坐标标注出来
                        map: map //将该标注设置在刚才创建的map中
                    });
                    //标注提示窗口
                    var infoWindow = new google.maps.InfoWindow({
                        content: "当前位置:<br/>经度:" + latlng.lat() + "<br/>维度:" + latlng.lng()   //提示窗体内的提示信息
                    });
                    //打开提示窗口
                    infoWindow.open(map, marker);
                },
                function (error) {
                    //处理错误
                    switch (error.code) {
                        case 1:
                            alert("位置服务被拒绝。");
                            break;
                        case 2:
                            alert("暂时获取不到位置信息。");
                            break;
                        case 3:
                            alert("获取信息超时。");
                            break;
                        default:
                            alert("未知错误。");
                            break;
                    }
                });
            } else {
                alert("你的浏览器不支持HTML5来获取地理位置信息。");
            }
        }
    </script>
</head>
<body onload="init()">
    <div id="map" style="width:800px;height:600px"></div>
</body>
</html>

出   处:http://www.cnblogs.com/djchan/

Leave a Reply