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

文章内容全部来自网络，我仅是做了收集和整理。

使用的js库文件如下：

/*
    bwH5.js by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-04-16
    updated 2011-07-07

    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. 
*/

var _bwH5_version = "1.1.3";

// useful for finding elements
var element = function(id) { return document.getElementById(id); }
var errorMessage = undefined;
var elStatus;

function getOpenDatabase() {
    try {
        if( !! window.openDatabase ) return window.openDatabase;
        else return undefined;
    } catch(e) {
        return undefined;
    }
}

function getLocalStorage() {
    try {
        if( !! window.localStorage ) return window.localStorage;
        else return undefined;
    } catch(e) {
        return undefined;
    }
}

function getSessionStorage() {
    try {
        if( !! window.sessionStorage ) return window.sessionStorage;
        else return undefined;
    } catch(e) {
        return undefined;
    }
}

function dispError( message ) {
    errorMessage = '<p class="error">' + message + '</p>';
    haveError = true;
}

function statusMessage(s) {
    if(!elStatus) elStatus = element('statusMessage');
    if(!elStatus) return;
    elStatus.innerHTML = s;
    if(s) elStatus.innerHTML = s;
    else elStatus.innerHTML = ' ';
}


function bwTable( wrap ) {
    this.wrap = ( wrap == undefined ) ? true : wrap;    // default to true
    this.rows = new Array();
    this.header = [];

    this.setHeader = function( row ) {
        this.header = row;
    }

    this.addRow = function( row ) {
        this.rows.push(row);
    }

    this.updateRow = function( index, row ) {
        this.rows[index] = row;
    }

    this.getRow = function ( index ) {
        return this.rows[index];
    }

    this.countRows = function () {
        return this.rows.length;
    }

    this.getTableHTML = function () {
        var a = '';
        if(this.wrap) a += '<table class="bwTable">\n';
        a += this.getHeaderHTML();
        for(var row in this.rows) {
            a += this.getRowHTML(this.rows[row]);
        }
        if(this.wrap) a += '</table>\n';
        return a;
    }

    this.getHeaderHTML = function () {
        if( this.header.length == 0 ) return '';
        var a = '<tr>';
        for( var cell in this.header ) {
            a += '<th>' + this.header[cell] + '</th>';
        }
        a += '</tr>\n';
        return a;
    }

    this.getRowHTML = function (row ) {
        var a = '<tr>';
        for( var cell in row ) {
            var v= row[cell];
            if(v == null) v = '<span class="red">NULL</span>';
            a += '<td>' + v + '</td>';
        }
        a += '</tr>\n';
        return a;
    }

    this.writeTable = function () {
        document.write(this.getTableHTML());
    }

}

css文件如下：

/*
    main.css by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-04-16

    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. 

    v 1.0.1 - bw 2011-04-19
*/

/* -------- color guide (From Explore California) ----------
#3c6b92 : main blue
#6acce2 : light blue
#2c566a : teal accent
#193742 : dark blue
#e1d8b9 : sand accent
#cb7d20 : orange accent
#51341a : brown
#995522 : dark orange (used for links or high contrast accents)
#cb202a : red accent (this color does not encode well, use only for small accents)
#896287 : purple
*/

/* reasonable reset */
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, table, tr, td,
p, blockquote, address, time, span, em, strong, img, ol, ul, li, dl, dt, figure, canvas, video {
    margin: 0;
    padding: 0;
    border: 0;
}

body  {
    font-family: Georgia, serif;    /* default page font */
    background-color: #3c6b92;
}

.red {
    color: #cb202a;
}

p.message, p.error {
    font: normal 1em Helvetica, Arial, sans-serif;
    padding: 0 3px;
}

p.message {
    border: 1px solid #995522;
    background-color: #e1d8b9;
    color: black;
}

p.error {
    border: 1px solid #193742;
    background-color: #cb202a;
    color: white;
}

#content {
    width: 85%;
    margin: 20px auto;
    padding: 5px;
    background-color: white;
    min-height: 300px;
}

#content h1, #content h2 {
    font: normal 1.4em Helvetica, Arial, sans-serif;
    color: #3c6b92;
}

#content p, h1, h2, h3 {
    margin-bottom: .5em;
}

#content h1 {
    border-bottom: solid 2px #3c6b92;
}

#content h2.error {
    color: #cb7d20;
}

/* bwTable */

.bwTable {
    background: #c3cebc;
    margin-bottom: .5em;
    border: 1px solid #995522;
    border-collapse: collapse;
}

.bwTable tr, .bwTable td, .bwTable th {
    font: normal 1em Helvetica, Arial, sans-serif;
    text-align: left;
    border: solid 1px #995522;
    padding: 1px 3px;
}

.bwTable tr:nth-child(odd) {
    background: #e1d8b9;
}

.bwTable th {
    background: #193742;
    color: #c3cebc;
    border: solid 1px #51341a;
}

.bwTable td {
    min-width: 100px;
}

/* form */

#form {
    margin-bottom: 10px;
    border-bottom: 2px solid #3c6b92;
}

#form input[type=text] {
    width: 300px;
}

#form td.button, #form td.label {
    text-align: right;
}

#form td.label {
    padding-right: 3px;
}

测试的HTML文件如下，我简单加上了一些说明：

<!DOCTYPE html>
<html>

<!-- 
    geoLocTest.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>
        Geolocation Test (1.1.3)
    </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 watchID;
        var geo;

        // position options
        var MAXIMUM_AGE = 1000;  // 1 second
        var TIMEOUT = 300000;   // 5 minutes
        var HIGHACCURACY = true;

        window.onload = function() {
            init();
        }
		
		// 初始化表格，如果能够获得地理信息，显示表头及内容；否则显示错误信息
        function init() {
            if((geo = getGeoLocation())) {
                t.setHeader( [ 'Latitude', 'Longitude', 'Time' ] );
                t.addRow( [ ' ', ' ', ' ' ] );
            } else {
                statusMessage('HTML5 Geolocation is not supported.')
            }
            dispResults();
        }
		
		// 获得地理信息
        function getGeoLocation() {
            try {
                if( !! navigator.geolocation ) return navigator.geolocation;
                else return undefined;
            } catch(e) {
                return undefined;
            }
        }
		
		// 显示结果
		function dispResults() {
            if(errorMessage) {
                element('results').innerHTML = errorMessage;
                return;
            }
            element('results').innerHTML = t.getTableHTML();
            statusMessage(watchID ? 'Watching.' : 'Stopped.');
        }
		
		// 显示坐标
		function show_coords(position) {
            d = new Date();
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;
            t.updateRow(0, [ lat.toString(), lon.toString(), d.toLocaleString() ] );
            dispResults();
        }

        function geo_error(error)
        {
            stopWatching();
            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 stopWatching() {
            if(watchID) geo.clearWatch(watchID);
            statusMessage('Stopped.');
            startStopElement.value = 'Start';
            watchID = null;
        }

		// 开始/停止跟踪坐标变化
        function startStopWatching() {
            startStopElement = element('startStop');
            if(startStopElement.value == 'Start') {
                watchID = geo.watchPosition(show_coords, geo_error, {
                    enableHighAccuracy: HIGHACCURACY,
                    maximumAge: MAXIMUM_AGE,
                    timeout: TIMEOUT
                });
                startStopElement.value = 'Stop';
            } else {
                stopWatching();
                statusMessage('Stopped.');
                startStopElement.value = 'Start';
            }
        }
    </script>
</head>

<body>

<div id="content">

    <h1> 
        Geolocation Test (1.1.3)
    </h1>
    
    <p class="message" id="statusMessage"/>
    
    <div id="results">
    <!-- results show here -->
    </div>
    
    <form>
        <input id="startStop" type="button" value="Start" onClick="startStopWatching()" />
    </form>

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

注意以上内容需要在手机设备上测试。