獲取地理位置信息

最新推荐文章于 2024-05-05 07:33:01 发布

lulu_jiang

最新推荐文章于 2024-05-05 07:33:01 发布

阅读量5.1k

点赞数

分类专栏： HTML5 文章标签： function html5 api google timer html

本文链接：https://blog.csdn.net/lulu_jiang/article/details/7788835

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html />
<html>
    <head>
        <meta charset="utf-8" name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <!-- 導入Google Map API腳本文件 -->
        <!--<script type="text/javascript" src=http://maps.google.com/maps/api/js?sensor=false />-->
        <script type="text/javascript">
            function get_location() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(show_map, handle_error,
                    //可選屬性
                    {
                        enableHighAccuracy: true,
                        //設置緩存有效時間為2分鐘
                        maximumAge: 60 * 1000 * 2,
                        //5秒內未獲取到地理位置信息則返回錯誤
                        timeout:5000
                    });
                }
                else {
                    alert("您的瀏覽器不支持HTML5來獲取地理位置信息");
                }
            };

            //獲取地理位置信息成功處理
            function show_map(position) {
                var latitude = position.coords.latitude;
                var longitude = position.coords.longitude;

                alert("緯度：" + latitude + "，經度：" + longitude);

//                var coords = position.coords;
//                var latlng = new google.masps.LatLng(coords.latitude, coords.longitude);
//                var myOptions = {
//                    zoom: 14,
//                    center:latlng,
//                    mapTypeId:google.maps.MapTypeId.ROADMAP
//                };
//                var mapl = new google.maps.Map(document.getElementById("map"), myOptions);
//                var marker = new google.maps.Marker({
//                    position: latlng,
//                    map:mapl
//                });

//                var infowindow = new google.maps.InfoWindow({
//                    content:"當前位置"
//                });

//                infowindow.open(mapl, marker);
            };

            //獲取地理位置信息失敗處理
            function handle_error(err) {
                switch (err.code) {
                    case 1:
                        alert("地理位置服務被拒絕");
                        break;
                    case 2:
                        alert("暫時獲取不到位置信息");
                        break;
                    case 3:
                        alert("獲取信息超時");
                        break;
                    default:
                        alert("未知錯誤");
                        break;
                }
            };
        </script>
    </head>
    <body οnlοad="get_location()">
        <!--
        Geolocation API：
        HTML5中，為window.navigator對象新增了一個geolocation屬性，可用Geolocation API來訪問

        該屬性存在以下3個方法：
        void getCurrentPosition(onSuccess, onError, options);
        獲取用戶當前的地理位置信息
        onSuccess：獲取當前地理位置信息成功時所執行的回調函數
        onError(可選)：獲取當前地理位置信息失敗時所執行的回調函數，含有一個error對象參數
                      code屬性：用戶拒絕了位置服務(值為1)
                               獲取不到位置信息(值為2)
                               獲取信息超時錯誤(值為3)
                      message屬性：一個字符串，包含錯誤信息
        options(可選)：一些可選屬性的列表
                      enableHighAccuracy：是否要求高精度地理位置信息，一般設為默認
                      timeout：地理位置信息的獲取操作做一超時限制(單位毫秒)
                      maximumAge：地理位置信息進行緩存有效時間

        int watchCurrentPosition(onSuccess, onError, options);
        持續獲取用戶當前地理位置信息，定期自動獲取
        該方法3個參數與getCurrentPosition方法使用方法相同
        該方法返回一個數字，與setInterval方法返回數字的使用方法類似(返回一timer ID)，可被clearWatch方法使用，停止對當前地理位置信息的監視

        void clearWatch(watchID);
        停止對當前用戶的地理位置信息的監視，參數為watchCurrentPosition方法調用返回值

        position對象：
        如果獲取地理位置信息成功，可在onSuccess回調函數中訪問position對象屬性獲得地理位置信息
        latitude屬性：當前地理位置緯度
        longitude屬性：當前地理位置精度
        altitude屬性：當前地理位置海拔高度
        accuracy屬性：獲取的緯度或經度的精度(單位米)
        altitudeAccurancy屬性：獲取的海波高度的精度(單位米)
        heading屬性：設備前進方向
        speed屬性：設備的前進速度(單位米/秒)
        timestamp屬性：獲取地理位置信息時的時間
        -->

        <div id="map" style="width:400px;height:400px"></div>
    </body>
</html>

注：嵌入google地圖失敗，目前原因不明