Geolocation地理定位

最新推荐文章于 2023-01-11 01:02:31 发布

原创最新推荐文章于 2023-01-11 01:02:31 发布 · 481 阅读

CC 4.0 BY-SA版权

本文介绍了W3C的Geolocation API，用于通过浏览器获取用户地理位置，并展示了如何结合Google Maps API在地图上标记位置。文章提供了一个简单的示例，演示了如何设置enableHighAccuracy以获取更精确的位置信息，并在网页中展示地图和定位点。

有关地理位置的获取和Google Maps API

1. W3C 中新添加了一个名为 Geolocation的 API 规范，Geoloaction API的作用就是通过浏览器获取用户的地理位置。我们可以使用navigator.geolocation来获取用户的地理位置信息。
获取当前地理位置的方法navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
其中success_callback_function为成功之后处理的函数，error_callback_function为失败之后返回的处理函数，参数position_options是配置项，可选,有三个值可设定：
    enableHighAccuracy：是否启用高精度设备（高精度设备包含但不局限于前面所提到的 GPS 和 WIFI）
    maximumAge：数值,如果将其定义为负数或者未定义，会重设为0
    timeout：数值,请求获取地理信息时的超时时间，如果将其定义为负数会重设为0，如果未定义则不启用超时判断

2. google maps API的使用：
根据经纬度，用google.maps.LatLng在地图上确定地点。
通过google.maps.Map获取地图，可以用zoom option调节显示的比例尺。
通过google.maps.Marker标示地图上的点。

3. GPS定位的方法..
在navigator.geolocation.getCurrentPosition调用中增加了enableHighAccuracy的指定，如下：
navigator.geolocation.getCurrentPosition(hasPosition, positionError, { enableHighAccuracy:true });

简单的例子:

<!DOCTYPE html>
<meta charset="utf-8" />
<head>

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    

    <title>GeoGoogleMapTest</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
    
    if(navigator.geolocation) {
        
        function hasPosition(position) {
            var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
            
            myOptions = {
                zoom: 15,
                center: point,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            
            mapDiv = document.getElementById("mapDiv"),
            map = new google.maps.Map(mapDiv, myOptions),
            
            marker = new google.maps.Marker({
                position: point,
                map: map,
                title: "You are here"
            });
        }
        function positionError(error)
        {
            // do error handling
        }
        //navigator.geolocation.getCurrentPosition(hasPosition);
        navigator.geolocation.getCurrentPosition(hasPosition, positionError, { enableHighAccuracy:true });
    }
</script>
<style>
#mapDiv {
    width:320px;
    height:460px;
    border:1px solid #efefef;
    margin:auto;
    -moz-box-shadow:5px 5px 10px #000;
    -webkit-box-shadow:5px 5px 10px #000;
}
</style>
</head>
<body>
<div id="mapDiv"></div>

</body>
</html>