Geolocation地理定位

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

RaylnGuan

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

阅读量138

点赞数

分类专栏： Html5&Css3

本文链接：https://blog.csdn.net/rayln/article/details/84047698

版权

Html5&Css3 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

[b]有关地理位置的获取和Google Maps API[/b]

[b]1. W3C 中新添加了一个名为 Geolocation的 API 规范，Geoloaction API的作用就是通过浏览器获取用户的地理位置。我们可以使用navigator.geolocation来获取用户的地理位置信息。[/b]
获取当前地理位置的方法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，如果未定义则不启用超时判断

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

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

[b]简单的例子:[/b]

<!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>