HTML-Geolocation API

11277 ワード
location
場所情報の取得:
  • は、html 5の地理的位置決め機能をサポートする最下位デバイスによってブラウザに提供される位置情報(経緯度および他のメタデータからなる)を返す位置情報を要求する.このAPIは、デバイスがどの下位技術で位置決めされるかを指定しないため、返されるメタデータは不確定である.同時に、設備が戻る実際の位置が正確であることを保証することはできない.
  • データソース:
  • IPアドレス地理的位置付け:ipアドレスを自動的に検索し、登録された物理アドレスを検索する.//多くのサイトはipアドレスの情報に基づいて広告をします.
  • の利点:どこでもサーバ側で処理できます.
  • 欠点:不正確で、一般的に都市級まで正確である.演算の代価が大きい.

  • GPS地理測位:地球の周囲で運行する複数のgps衛星の信号を収集することによって実現される.
  • の利点:非常に正確な
  • 欠点:位置決め時間が長く、室内の効果がよくなく、追加のハードウェア設備が必要である.

  • wifi地理的位置:三角距離計算(ユーザの現在位置から既知の複数のwifiアクセスポイントまでの距離)によって得られる.
  • の利点:正確で、室内で使用することができます;簡単で、迅速な位置決めができます.
  • の欠点:田舎のこれらの無線アクセスポイントの少ない地域では効果が悪い.

  • 携帯電話の地理的位置:ユーザーを通じていくつかの基地局までの三角距離を確定する.
  • の利点:かなり正確で、室内で使用することができて、簡単で、迅速に位置決めすることができます;
  • 欠点:携帯電話や他のmodenにアクセスできるデバイスが必要である.

  • ユーザカスタム地理的位置:プログラミングによりユーザの位置またはユーザカスタム位置を計算する
  • の利点:ユーザは、プログラム測位サービスよりも正確な位置データを得ることができる.地理的位置決めサービスの結果を代替位置情報として許可する.
  • 欠点:特にユーザーの位置が変更された場合、正確ではない可能性があります.



    • プライバシーの仕組み:
  • ユーザーはブラウザから位置感知アプリケーションを開く.
  • アプリケーションウェブページがロードされ、Geolocation関数によって要求位置座標が呼び出される.ブラウザはこの要求をブロックし、ユーザーの許可を要求します.
  • ユーザが同意した後、ブラウザはそのホストデバイスから座標情報を取得する.
  • ブラウザは、信頼された外部測位サービスに座標を送信し、詳細を返し、html 5 geolocationアプリケーションに位置情報を返します.

    • APIの使用:
  • ブラウザサポートチェック:navigator.geolocation
  • ロケーションリクエスト:
  • 単一位置決め要求:コア関数、navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError);
  • updateLocation:ブラウザが位置情報にアクセスする条件を備えている限り、この関数が呼び出されます.この関数は、座標(coords)とタイムスタンプを含む位置オブジェクトパラメータを受け入れます.
  • handleLocationError:エラー情報を処理すると、エラーを記述するオブジェクトにエラー符号化と記述が含まれます.
  • 1:ユーザ選択拒否;
  • 2:ユーザ情報の取得を試みたが失敗した.
  • 3:オプションtimeout値が設定後タイムアウト
  • オプションの要求プロパティ:
  • enableHeightAccuracy:このパラメータを有効にすると、ブラウザにHTML 5 Geolocationサービスを有効にする高度な正確なモードを通知します.注意有効にすると差がないか、より多くの時間計算を招く可能性があります.
  • timeout:単位msは、ブラウザに現在の位置が許容する最長時間を計算するように伝え、デフォルトはinfinityである.
  • maxmumAge:単位msは、ブラウザが位置を再計算する間隔を表し、デフォルトは0です.
                   function loadDemo() {
			if(navigator.geolocation) {
				document.getElementById('support').innerHTML = 'Geolocation supported';
			} else {
				document.getElementById('support').innerHTML = 'Geolocation is not supported in your browser';
			}
		}
		function updateLocation(position) {
			var latitude = position.coords.latitude; //  
			var longitude = position.coords.longitude; //  
			var accuracy = position.coords.accuracy; //   
			var timestamp = position.timestamp;  //   

			document.getElementById('latitude').innerHTML = latitude;
			document.getElementById('longitude').innerHTML = longitude;
			document.getElementById('accuracy').innerHTML = accuracy;
			document.getElementById('timestamp').innerHTML = timestamp;
		}

		function handleLocationError(error) {
			var msg = error.message;
			switch(error.code) {
				case 0:
				  updateErrorStatus('There was an error while retrieving your location.Additional details: ' + msg);
				  break;
				case 1:
				  updateErrorStatus('The user opted not to share his or her location');
				  break;
				case 2:
				  updateErrorStatus('The browser was unable to determine your location.Additional details: ' + msg);
				  break;
				case 3:
				  updateErrorStatus('The browser timed out before retrieving the location');
				  break;      
			}
		}
		function updateErrorStatus(msg) {
			console.log(msg);
			document.getElementById('msg').innerHTML = msg;
		}
		window.onload = loadDemo;
		var btn = document.getElementById('btn');
		btn.onclick = function () {
			navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, {timeout: 100000});
		}

    　　



  • 重複性の位置更新要求:コア関数、navigator.geolocation.watchPosition(updateLocation, handleLocationError);
  • ユーザーの位置が変化すればupdateLocationを呼び出す.
  • リスニングを停止します.
    var watchId = navigator.geolocation.watchPosition(updateLocation, handleLocationError);
navigator.geolocation.clearWatch(watchId);　　




    • コンストラクションアプリケーション:(距離トラッカー):
    <body onload='loadDemo()'>
  <header>
  	<h1>Odometer Demo</h1>
    <h4>Live Race Data!</h4>
  </header>
  <div id='container'>
  <section>
  	<article>
  		<header>
  			<h1>Your Location</h1>
  		</header>
  		<div class='info' id='status'>Geolocation is not supported in your browser</div>
  		<div class='geostatus'>
  			<p id='latitude'>Latitude: </p>
        <p id='longitude'>Longitude: </p>
  			<p id='accuracy'>Accuracy: </p>
  			<p id='timestamp'>Timestamp: </p>
  			<p id='currDist'>Current distance traveled: </p>
  			<p id='totalDist'>Total distance traveled: </p>
  		</div>
  	</article>
  </section>
  <footer>
  	<h2>Powered by HTML5, and your feet!</h2>
  </footer>
  </div>

  <script type="text/javascript">
  	var totalDistance = 0.0;
    var lastLat;
    var lastLong;

    Number.prototype.toRadians = function() {
      return this * Math.PI / 180;
    }
    function distance(latitude1, longitude1, latitude2, longitude2) {
      //r     ，  km；
      var R = 6371;
      var deltaLatitude = (latitude2 - latitude1).toRadians();
      var deltaLongitude = (longitude2 - longitude1).toRadians();
      latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians();
      var a = Math.sin(deltaLatitude/2) * Math.sin(deltaLatitude/2) + Math.cos(latitude1) * Math.cos(latitude2) * Math.sin(deltaLongitude/2) * Math.sin(deltaLongitude/2);
      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
      var d = R * c;
      return d;
    }
    function updateErrorStatus(message) {
      document.getElementById('status').style.background = 'papayaWhip';
      document.getElementById('status').innerHTMl = '<strong>Error</strong>: ' + message;
    }
    function updateStatus(message) {
      document.getElementById('status').style.background = 'paleGreen';
      document.getElementById('status').innerHTMl = message;
    }
    function updateLocation(position) {
      var latitude = position.coords.latitude; 
      var longitude = position.coords.longitude; 
      var accuracy = position.coords.accuracy; 
      var timestamp = position.timestamp;  

      document.getElementById('latitude').innerHTML = 'latitude: ' + latitude;
      document.getElementById('longitude').innerHTML = 'longitude: ' + longitude;
      document.getElementById('accuracy').innerHTML = 'accuracy: ' + accuracy;
      document.getElementById('timestamp').innerHTML = 'timestamp: ' + timestamp;
      //  accuracy   ，       
      if(accuracy >= 30000) {
        updateStatus('Need more accuracy values to calculate distance');
        return;
      }
      //    
      if((lastLat != null) && (lastLong != null)) {
        var currentDistance = distance(latitude, longitude, lastLat, lastLong);
        alert(0);
        document.getElementById('currDist').innerHTMl = 'Current distance traveled: ' + currentDistance.toFixed(2); + ' km';
        totalDistance += currentDistance;
        document.getElementById('totalDist').innerHTMl = 'Total distance traveled: ' + currentDistance.toFixed(2) + ' km';
        updateStatus('Location successfully updated');
      }
      lastLat = latitude;
      lastLong = longitude;
    }
    function handleLocationError(error) {
      var msg = error.message;
      switch(error.code) {
        case 0:
          updateErrorStatus('There was an error while retrieving your location.Additional details: ' + msg);
          break;
        case 1:
          updateErrorStatus('The user opted not to share his or her location');
          break;
        case 2:
          updateErrorStatus('The browser was unable to determine your location.Additional details: ' + msg);
          break;
        case 3:
          updateErrorStatus('The browser timed out before retrieving the location');
          break;      
      }
    }

    function loadDemo() {
      document.getElementById('status').innerHTMl = 'HTMl5 Geolocation is supported in your browser';
      navigator.geolocation.watchPosition(updateLocation, handleLocationError, {timeout: 10000});
    }
  </script>
</body>

    GoogleMapと組み合わせて使用:
    <!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	#map{
		width:500px;
		height: 400px;
	}
	</style>
</head>
<body>
<div id='map'></div>
<div id='status'></div>
<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type="text/javascript">
	function updateLocation(position) {
		var latitude = parseFloat(position.coords.latitude);
		var longitude = parseFloat(position.coords.longitude);
        var latlng = new google.maps.LatLng(latitude, longitude);

        var mapOptions = {
                 zoom: 8,
                 center: latlng,
                 mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map'),mapOptions);    

		map.setCenter(latlng);

		var marker = new google.maps.Marker({
            map: map,
            position: latlng,

        });
	}
	navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError);
	function handleLocationError(error) {
      document.getElementById('status').innerHTMl = '<strong>Error</strong>: ' + error.message;
    }
</script>
</body>
</html>

    　　
    Python関数のパラメータ伝達(3)
    WPF C#開発におけるSQLDMOによるデータベースバックアップリストア操作における注意点