关于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>

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




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值