GeolocationとWeb SocketsのNodeJsベースの実戦(2)

前のチュートリアルの明河はいくつかのNodeJsの知識点を説明して、このチュートリアルはみんなに先端の方面の知識点を説明します.
Geolocation
Geolocationはhtml 5の主な内容であり、クライアントの地理情報を処理するために使用され、特にハンドヘルドデバイス上で広く使用されているシーンである.
Geolocationの簡単なdemo
(PS:demoでは位置位置決めを実現していますが、あなたの移動に伴って座標も変化することはできません.NodeJsのsocket.ioモジュールで実現できます.)
Geolocationの互換性
Geolocation互換性は悪くない、IE 9以下ではない、あなたは知っています....
Geolocationの地理情報精度の問題
Geolocationの主な位置決め方法は以下の通りです.

ipアドレス:web端末で最もよく使われる方法でもあり、精度は基本的に日常の使用シーンに合致し、ISP機械室に位置決めする場合がある

.

GPS:モバイル機器によく見られ、最も正確で、位置決めに時間がかかる.

WiFi基地局のmacアドレス:適用範囲が狭い

GSMまたはCDMA基地局:精度一般

(『html 5プレミアムプログラミング』には詳細な論述がある.)
Geolocation APIの使用
まずnavigator.geolocationの存在性を通じて、ブラウザがGeolocationをサポートしているかどうかを判断する.

    /**
     *         geolocation api
     * @return Boolean
     */
    function isSupportGeo(){
        var isSupport = false;
        if (navigator.geolocation) {
            isSupport = true;
        } else {
            isSupport = false;
            console.log('      geolocation');
        }
        return isSupport;
    }

クライアントの現在の地理的位置を取得するにはどうすればいいですか?navigator.geolocation.getCurrentPosition(successCallback, [errorCallback] , [positionOptions])、getCurrentPosition()の方法を使用すればよい.
パラメータの意味は次のとおりです.

successCallback:位置決め成功時に実行されるコールバック関数

を取得

errorCallback:オプション、位置決め失敗時に実行されるコールバック関数

positionOptions:オプションで、位置決め精度を制御するための3つの構成可能な属性{enableHighAccuracy:boolean,timeout:long,maximumAge:long}を持ち、一般的に

を構成しない
demoコードは次のとおりです.

        //        
	if (isSupportGeo) {
		navigator.geolocation.getCurrentPosition(positionSuccess, positionError, { enableHighAccuracy: true });
	} else {
		$('.map').text('Your browser is out of fashion, there\'s no geolocation!');
	}

positionSuccessコールバックにはpositionデータがあり、コアのデータはlongitude(経度)、latitude(次元)、accuracy(精度)である.
positionSuccessというコールバック関数コードを見てみましょう.

    /**
     *                 
     * @param position     
     */
     function positionSuccess(position) {
                //  
		var lat = position.coords.latitude;
                //  
	 	var lng = position.coords.longitude;
                 //               
		var acr = position.coords.accuracy;
      }

座標を地図上に位置決めするにはleafletのAPI(google mapでも可能)が必要です.
leaflet
leafletはかなり良い地図ライブラリで、とても簡単に使えます.
ページにleafletを導入する.js

leafletはLグローバル変数を追加し、すべてのAPIを含む.
leaflet apiの使用
ここをクリックしてAPIドキュメントにアクセスします.内容は多く、本文は核心的ないくつかの方法しか使わない.
L.marker()を使用して座標を位置決めする

     function positionSuccess(position) {
                //  
		var lat = position.coords.latitude;
                //  
	 	var lng = position.coords.longitude;
                 //               
		var acr = position.coords.accuracy;

		//       
		var userMarker = L.marker([lat, lng], {
			icon: redIcon
		});

		// demo
		// userMarker = L.marker([51.45, 30.050], { icon: redIcon });
      }

L.marker()最初のパラメータは座標、2番目のパラメータはオプションです.demoでは、座標を位置決めするときに使用するiconスタイルをカスタマイズします.
iconを定義するのは面倒で、L.Iconインタフェースを使用する必要があります.

	//          
	var tinyIcon = L.Icon.extend({
		options: {
			shadowUrl: '../assets/marker-shadow.png',
			iconSize: [25, 39],
			iconAnchor:   [12, 36],
			shadowSize: [41, 41],
			shadowAnchor: [12, 38],
			popupAnchor: [0, -30]
		}
	});
	var redIcon = new tinyIcon({ iconUrl: '../assets/marker-red.png' });

iconUrlでiconピクチャの位置を設定します.
次にleafletの地図をロードし、map()メソッドを使用します.

		//     
		map = L.map('map');

最初のパラメータは地図コンテナidで、対応:

map()是最核心的方法，拥有丰富的配置项，详细可以看 文档，比如：

var map = L.map('map', {
    //       
    center: [51.505, -0.09],
    //    
    zoom: 13
});

L.tileLayer()を使用して、地図タイルレイヤのピクチャアドレスを構成します.
1枚の地図は完全な1枚の画像ではなく、複数の画像がつながっているので、これらの小さな画像を瓦のレイヤー、tileLayerと呼んでいます.

L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { maxZoom: 18, detectRetina: true }).addTo(map);

http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.pngに重点を置いて説明します.このパスは実は画像パスのテンプレートで、デバッグツールを通じて地図のレイヤーのパスを見ることができます.
leafletは自動的に{s}をa、bまたはcなどに置き換えて2級ドメイン名を構成し、{z}は拡大レベル、{x}と{y}は座標である.
次に、地図コンテナを配置して世界全体を埋めます.(コンテナ内に世界地図を表示)

map.fitWorld();

地図に位置座標を追加するには、次の手順に従います.

		userMarker.addTo(map);

leafletは、位置決め座標iconにポップアップレイヤを追加し、指定した内容を表示します.

		userMarker.bindPopup('    ，  id  ' + userId).openPopup();

userIdはランダムidです.
完全な地図位置決めコード
htmlの部分コードは以下の通りです.

  
  
  
  
  


    

  
  
  
  
  
js      ：
  

	//          
	var tinyIcon = L.Icon.extend({
		options: {
			shadowUrl: '../assets/marker-shadow.png',
			iconSize: [25, 39],
			iconAnchor:   [12, 36],
			shadowSize: [41, 41],
			shadowAnchor: [12, 38],
			popupAnchor: [0, -30]
		}
	});
	var redIcon = new tinyIcon({ iconUrl: '../assets/marker-red.png' });
    /**
     *         geolocation api
     * @return Boolean
     */
    function isSupportGeo(){
        var isSupport = false;
        if (navigator.geolocation) {
            isSupport = true;
        } else {
            isSupport = false;
            console.log('      geolocation');
        }
        return isSupport;
    }
    //        
	if (isSupportGeo) {
		navigator.geolocation.getCurrentPosition(positionSuccess, positionError, { enableHighAccuracy: true });
	} else {
		$('.map').text('Your browser is out of fashion, there\'s no geolocation!');
	}
    /**
     *                 
     * @param position     
     */
	function positionSuccess(position) {
        //  
		var lat = position.coords.latitude;
        //  
		var lng = position.coords.longitude;
        //               
		var acr = position.coords.accuracy;

		//       
		var userMarker = L.marker([lat, lng], {
			icon: redIcon
		});
		// demo
		// userMarker = L.marker([51.45, 30.050], { icon: redIcon });

		//     
		map = L.map('map');

		//              
		L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { maxZoom: 18, detectRetina: true }).addTo(map);

		//              
		map.fitWorld();

		userMarker.addTo(map);
		userMarker.bindPopup('    ，  id  ' + userId).openPopup();
	}