关于HTML5中使用地理信息（二）

最新推荐文章于 2021-09-01 22:44:34 发布

Soloman

最新推荐文章于 2021-09-01 22:44:34 发布

阅读量1.5k

点赞数

分类专栏： HTML5/CSS/JavaScript 文章标签： html5 function stylesheet class file

HTML5/CSS/JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

之前已经给了一个小例子展现跟踪坐标信息，这里我们将分解动作：

显示浏览器是否支持（实际上是显示手机是否支持）：

<!DOCTYPE html>
<html>

<!-- 
    detecting.html by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-07-20

    Copyright (c) 2011 The BearHeart Group, LLC
    This file may be used for personal educational purposes as needed. 
    Use for other purposes is granted provided that this notice is
    retained and any changes made are clearly indicated as such. 
-->

<head>
    <title>
        HTML5 Geolocation
    </title>
    <link rel="stylesheet" type="text/css" href="../CSS/main.css" />
    <script type="text/javascript" src="../Javascript/bwH5.js"></script>
    <script type="text/javascript">
        var geo;

        function getGeoLocation() {
            try {
                if( !! navigator.geolocation ) return navigator.geolocation;
                else return undefined;
            } catch(e) {
                return undefined;
            }
        }

        function init() {
            if((geo = getGeoLocation())) {
                statusMessage('HTML5 Geolocation is supported.');
            } else {
                statusMessage('HTML5 Geolocation is not supported.')
            }
            dispResults();
        }

        window.onload = function() {
            init();
        }
    </script>
</head>

<body>

<div id="content">

    <h1> 
        HTML5 Geolocation
    </h1>
    
    <p class="message" id="statusMessage"/>
    
</div>
</body>
</html>

得到地理信息坐标：

<!DOCTYPE html>
<html>

<!-- 
    coordinates.html by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-06-15
    updated 2011-07-20

    Copyright (c) 2011 The BearHeart Group, LLC
    This file may be used for personal educational purposes as needed. 
    Use for other purposes is granted provided that this notice is
    retained and any changes made are clearly indicated as such. 
-->

<head>
    <title>
        HTML5 Geolocation
    </title>
    <link rel="stylesheet" type="text/css" href="../CSS/main.css" />
    <script type="text/javascript" src="../Javascript/bwH5.js"></script>
    <script type="text/javascript">
        var t = new bwTable();
        var geo;

        function getGeoLocation() {
            try {
                if( !! navigator.geolocation ) return navigator.geolocation;
                else return undefined;
            } catch(e) {
                return undefined;
            }
        }

        function show_coords(position) {
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;
            t.updateRow(0, [ lat.toString(), lon.toString() ] );
            dispResults();
        }

        function dispResults() {
            element('results').innerHTML = t.getTableHTML();
        }

        function init() {
            if((geo = getGeoLocation())) {
                statusMessage('Using HTML5 Geolocation')
                t.setHeader( [ 'Latitude', 'Longitude' ] );
                t.addRow( [ ' ', ' ' ] );
            } else {
                statusMessage('HTML5 Geolocation is not supported.')
            }
            geo.getCurrentPosition(show_coords);
        }

        window.onload = function() {
            init();
        }
    </script>
</head>

<body>

<div id="content">

    <h1> 
        HTML5 Geolocation
    </h1>
    
    <p class="message" id="statusMessage"/>
    
    <div id="results">
    <!-- results show here -->
    </div>

</div>
</body>
</html>

带上错误处理的：

<!DOCTYPE html>
<html>

<!-- 
    errorhandling.html by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-06-15
    updated 2011-07-20

    Copyright (c) 2011 The BearHeart Group, LLC
    This file may be used for personal educational purposes as needed. 
    Use for other purposes is granted provided that this notice is
    retained and any changes made are clearly indicated as such. 
-->

<head>
    <title>
        HTML5 Geolocation
    </title>
    <link rel="stylesheet" type="text/css" href="../CSS/main.css" />
    <script type="text/javascript" src="../Javascript/bwH5.js"></script>
    <script type="text/javascript">
        var t = new bwTable();
        var geo;

        function getGeoLocation() {
            try {
                if( !! navigator.geolocation ) return navigator.geolocation;
                else return undefined;
            } catch(e) {
                return undefined;
            }
        }

        function show_coords(position) {
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;
            t.updateRow(0, [ lat.toString(), lon.toString() ] );
            dispResults();
        }

        function geo_error(error) {
            switch(error.code) {
                case error.TIMEOUT:
                    alert('Geolocation Timeout');
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert('Geolocation Position unavailable');
                    break;
                case error.PERMISSION_DENIED:
                    alert('Geolocation Permission denied');
                    break;
                default:
                    alert('Geolocation returned an unknown error code: ' + error.code);
            }
        }

        function dispResults() {
            element('results').innerHTML = t.getTableHTML();
        }

        function init() {
            if((geo = getGeoLocation())) {
                statusMessage('Using HTML5 Geolocation')
                t.setHeader( [ 'Latitude', 'Longitude' ] );
                t.addRow( [ ' ', ' ' ] );
            } else {
                statusMessage('HTML5 Geolocation is not supported.')
            }
            geo.getCurrentPosition(show_coords, geo_error);
        }

        window.onload = function() {
            init();
        }
    </script>
</head>

<body>

<div id="content">

    <h1> 
        HTML5 Geolocation
    </h1>
    
    <p class="message" id="statusMessage"/>
    
    <div id="results">
    <!-- results show here -->
    </div>

</div>
</body>
</html>

连续跟踪坐标的：

<!DOCTYPE html>
<html>

<!-- 
    continuous.html by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-06-15
    updated 2011-07-20

    Copyright (c) 2011 The BearHeart Group, LLC
    This file may be used for personal educational purposes as needed. 
    Use for other purposes is granted provided that this notice is
    retained and any changes made are clearly indicated as such. 
-->

<head>
    <title>
        HTML5 Geolocation
    </title>
    <link rel="stylesheet" type="text/css" href="../CSS/main.css" />
    <script type="text/javascript" src="../Javascript/bwH5.js"></script>
    <script type="text/javascript">
        var t = new bwTable();
        var geo;

        function getGeoLocation() {
            try {
                if( !! navigator.geolocation ) return navigator.geolocation;
                else return undefined;
            } catch(e) {
                return undefined;
            }
        }

        function show_coords(position) {
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;
            t.updateRow(0, [ lat.toString(), lon.toString() ] );
            dispResults();
        }

        function geo_error(error) {
            switch(error.code) {
                case error.TIMEOUT:
                    alert('Geolocation Timeout');
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert('Geolocation Position unavailable');
                    break;
                case error.PERMISSION_DENIED:
                    alert('Geolocation Permission denied');
                    break;
                default:
                    alert('Geolocation returned an unknown error code: ' + error.code);
            }
        }

        function dispResults() {
            element('results').innerHTML = t.getTableHTML();
        }

        function init() {
            if((geo = getGeoLocation())) {
                statusMessage('Using HTML5 Geolocation')
                t.setHeader( [ 'Latitude', 'Longitude' ] );
                t.addRow( [ ' ', ' ' ] );
            } else {
                statusMessage('HTML5 Geolocation is not supported.')
            }
            geo.watchPosition(show_coords, geo_error, { 
                maximumAge: 1000,   // 1 sec
                timeout: 300000,    // 5 min
                enableHighAccuracy: true
            });
        }

        window.onload = function() {
            init();
        }
    </script>
</head>

<body>

<div id="content">

    <h1> 
        HTML5 Geolocation
    </h1>
    
    <p class="message" id="statusMessage"/>
    
    <div id="results">
    <!-- results show here -->
    </div>

</div>
</body>
</html>

Soloman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于HTML5中使用地理信息（二）

之前已经给了一个小例子展现跟踪坐标信息，这里我们将分解动作：显示浏览器是否支持（实际上是显示手机是否支持）：<!-- detecting.html by Bill Weinman created 2011-07-20 Copyright (c) 2011 The BearHeart Group, LLC This file
复制链接

扫一扫

专栏目录