关于HTML5中使用地理信息（二）
之前已经给了一个小例子展现跟踪坐标信息，这里我们将分解动作：
显示浏览器是否支持（实际上是显示手机是否支持）：
<!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>