HTML 5 Geolocation API:リアルタイムトレースアプリケーション

10762 ワード
location
getCurrentPositionとwatchPosition
 
watchPositionはあなたの移動を監視し、位置が変わったときに位置を報告します.watchPPositionメソッドは確かにgetCurrentPositionメソッドに似ているように見えますが、動作は少し異なり、アヌアよりも位置が異なるたびに成功したプロセッサを繰り返し呼び出します.
watchPosition呼び出し手順:
  • あなたのアプリケーションwatchPositionは、成功した処理関数
    • を入力します.
  • watchPositionバックグラウンドであなたの位置を監視し続けます
  • あなたの位置が変更されたとき、watchPostionは成功処理関数を呼び出して新しい位置
    • を報告します.
  • watchPostionは、clearWatchを呼び出して
    • をクリアするまで、あなたの場所を監視し続けます(成功したプロセッサに報告します).
     
    HTMLコード
     
    HTML 5 COL学院の中級課程に関する章の課程を基礎に、HTMLにいくつかのボタンを追加して、あなたの位置を追跡し始め、終了することができます.私たちが開始ボタンを設定したのは、ユーザーがずっと追跡されたくないためです.彼らは通常、これに対していくつかの制御を望んでいます.終了ボタンを設定するのは、モバイルデバイスにとって、ユーザーの位置をチェックし続けるのはかなり消費電力のある操作であることを考慮しています.追跡をオンにすると、バッテリーの寿命に深刻な影響を及ぼします.
    注意:ユーザーをリアルタイムで追跡するには、非常に消費電力がかかります.ユーザーに情報を提供し、先日追跡中であることを指摘し、対応するコントロールも提供しなければならない.
    <!DOCTYPE html>
<html>
<head>
<meta='keywords' content='HTML5COL  ,HTML5COL,CSS3,HTML5COL,    '>
<script>
<!--script  , HTML5COL       ：Geolocation API  ：      --->
</script>
</head>

<body>
   
   <form>
   <input type="button" id="watch" value="Watch me">
   <input type="button" id="clearWatch" value="Clear watch">
   </form>

   <p>position:</p>
   <div id="location" >
   </div>
   
   <div id="distance" >
   </div>
</body>

</html>

     
    コードの意味:私たちは1つのフォーム要素を追加しました.その中には2つのボタンが含まれています.1つは監視を開始するために使用され、idは「watch」で、もう1つは監視をクリアするために使用され、idは「clearwatch」です.そして私たちは元の
    リアルタイムロケーションのレポート
    ボタンにプログラムを追加
    地理的位置付けがサポートされている場合にのみ、getMyLocation関数にボタンクリックハンドラを追加します.また、すべての地理的位置追跡を2つのボタンで制御するため、getMyLocationから現在のgetCurrentPosition呼び出しを削除します.このコードを削除し、watchPostion対応監視ボタン、clearWatch対応クリアボタンの2つのプロセッサを追加します.
    function getMyLocation() {
	if (navigator.geolocation) {
		var watchButton = document.getElementById("watch");
		watchButton.onclick = watchLocation;
		var clearWatchButton = document.getElementById("clearWatch");
		clearWatchButton.onclick = clearWatch;
	}
	else {
		alert("Oops, no geolocation support");
	}
}

     
    コードの意味:ブラウザが地理的な位置決めをサポートしている場合、ボタンクリック処理プログラムを追加します.地理的位置付けがサポートされていない場合、これらのプロセッサを追加することは意味がありません.上記のコードではwatchLocationを呼び出して監視を開始し、clearWatchを呼び出して監視を停止します.
     
    watchLocationプロセッサの作成
     
    現在、私たちがしなければならない仕事は、ユーザーが監視ボタンをクリックしたとき、彼らの位置を追跡したいということです.geolocationを使いますwatchPositionメソッドは彼らの位置を監視し始めた.geolocation.watchPositionメソッドには2つのパラメータプログラムがあります.1つの成功処理プログラムと1つのエラー処理プログラムなので、既存の2つの処理プログラムを使用します.またwatchIdも返され、いつでもこのidを使用して監視動作をキャンセルできます.このwatchIdをグローバル変数に配置し,クリアボタンのためにクリックハンドラを記述する際にこの変数を用いる.次はwatchLocation関数とwatchIdのコードです.
    var watchId = null;
function watchLocation() {
	watchId = navigator.geolocation.watchPosition(
					displayLocation, 
					displayError);
}

     
    コードの意味:ファイルの一番上にwatchIdをグローバル変数として追加します.nullに初期化し、後でこの変数を監視をクリアする必要があります.watchLocationメソッドを呼び出し、前に作成した成功したハンドラdisplayLocationと既存のエラーハンドラdisplayErrorに転送します.
     
    watchLocationプロセッサの作成
     
    プロセッサを作成して監視動作をクリアします.そのためにwatchIdを得る、geolocationに伝える必要がある.义齿
    function clearWatch() {
	if (watchId) {
		navigator.geolocation.clearWatch(watchId);
		watchId = null;
	}
}

     
    最後に、displayLocationに対して小さな修正をします
     
    前に書いたGoogle Mapsコードを設計する小さな修正も必要です.このコードではshowMapを呼び出してGoogle Mapを表示します.showMapはページに地図を作成します.これは一度だけしたいことです.ただし、watchPositionで位置を監視し始めると、位置が更新されるたびにdisplayLocationが呼び出されることを覚えておいてください.
    showMapが1回しか呼び出されないことを確認するには、まずこの地図が存在するかどうかを確認し、存在しない場合はshowMapを呼び出します.それ以外の場合、showMapはすでに呼び出されている(地図が作成されている)ので、この関数を呼び出す必要はありません.
    function displayLocation(position) {
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;

	var div = document.getElementById("location");
	div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
	div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy)";

	var km = computeDistance(position.coords, ourCoords);
	var distance = document.getElementById("distance");
	distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";

	if (map == null) {
		showMap(position.coords); 
		//       showMap,       ，         displayLocation    showMap
	}
}

     
    モバイルデバイスを使用していることを確認します
     
    HTML 5 COL学院の門を離れると、ずっと移動しているので、あなたの行方を監視するために、1台の設備が必要です.
    総合コード展示;
     
    基本HTMLコード
    <!doctype html>
<html>
<head>
<title>Wherever you go, there you are</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="myLoc.js"></script>
<link rel="stylesheet" href="myLoc.css">
</head>
<body>

<form>
<input type="button" id="watch" value="Watch me">
<input type="button" id="clearWatch" value="Clear watch">
</form>

<div id="location">
Your location will go here.
</div>

<div id="distance">
Distance from HTML5COL OFFICE will go here.
</div>

<div id="map">
</div>

</body>
</html>

     
    myLoc.jsコード;
    /* myLoc.js */

var watchId = null;
var map = null;
var ourCoords =  {
	latitude: 47.624851,
	longitude: -122.52099
};

window.onload = getMyLocation;

function getMyLocation() {
	if (navigator.geolocation) {
		var watchButton = document.getElementById("watch");
		watchButton.onclick = watchLocation;
		var clearWatchButton = document.getElementById("clearWatch");
		clearWatchButton.onclick = clearWatch;
	}
	else {
		alert("Oops, no geolocation support");
	}
}

function displayLocation(position) {
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;

	var div = document.getElementById("location");
	div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
	div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy)";

	var km = computeDistance(position.coords, ourCoords);
	var distance = document.getElementById("distance");
	distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";

	if (map == null) {
		showMap(position.coords);
	}
}


// --------------------- Ready Bake ------------------
//
// Uses the Spherical Law of Cosines to find the distance
// between two lat/long points
//
function computeDistance(startCoords, destCoords) {
	var startLatRads = degreesToRadians(startCoords.latitude);
	var startLongRads = degreesToRadians(startCoords.longitude);
	var destLatRads = degreesToRadians(destCoords.latitude);
	var destLongRads = degreesToRadians(destCoords.longitude);

	var Radius = 6371; // radius of the Earth in km
	var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + 
					Math.cos(startLatRads) * Math.cos(destLatRads) *
					Math.cos(startLongRads - destLongRads)) * Radius;

	return distance;
}

function degreesToRadians(degrees) {
	radians = (degrees * Math.PI)/180;
	return radians;
}

// ------------------ End Ready Bake -----------------

function showMap(coords) {
	var googleLatAndLong = new google.maps.LatLng(coords.latitude, 
												  coords.longitude);
	var mapOptions = {
		zoom: 10,
		center: googleLatAndLong,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var mapDiv = document.getElementById("map");
	map = new google.maps.Map(mapDiv, mapOptions);

	// add the user marker
	var title = "Your Location";
	var content = "You are here: " + coords.latitude + ", " + coords.longitude;
	addMarker(map, googleLatAndLong, title, content);
}

function addMarker(map, latlong, title, content) {
	var markerOptions = {
		position: latlong,
		map: map,
		title: title,
		clickable: true
	};
	var marker = new google.maps.Marker(markerOptions);

	var infoWindowOptions = {
		content: content,
		position: latlong
	};

	var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

	google.maps.event.addListener(marker, 'click', function() {
		infoWindow.open(map);
	});
}


function displayError(error) {
	var errorTypes = {
		0: "Unknown error",
		1: "Permission denied",
		2: "Position is not available",
		3: "Request timeout"
	};
	var errorMessage = errorTypes[error.code];
	if (error.code == 0 || error.code == 2) {
		errorMessage = errorMessage + " " + error.message;
	}
	var div = document.getElementById("location");
	div.innerHTML = errorMessage;
}

//
// Code to watch the user's location
//
function watchLocation() {
	watchId = navigator.geolocation.watchPosition(
					displayLocation, 
					displayError);
}

function clearWatch() {
	if (watchId) {
		navigator.geolocation.clearWatch(watchId);
		watchId = null;
	}
}

     
     
    テストアドレス:オンラインテスト
    原文:http://www.html5col.com/watchposition_apply/
    party_bidプロジェクトの作成アクティビティ(board 1)
    Arduino GY-30デジタル光強度センサの問題解決策