GPSデータの各種情報を表示する(2)

前回に続いて、GPSファイルの情報を表示する。

  • GPSファイルを読み込む

  • 結果は変数:gGpsData に格納する。

  • GPSデータをグリッドに表示する

  • グリッドに値を設定する関数 setGridValueByKey(tgt,key_name,value) を用意する。
    オブジェクト配列の特定の要素から最大・最小値を取り出す方法は、「JavaScriptでオブジェクトの配列から特定の要素の最大値を得る」を参照。
    あわせてパネルを開く。

    function showGridGpsInfo(){
        // キー名を指定してグリッドにGPSデータの値を設定する
        setGridValueByKey(gridGpsInfo,'start date', gGpsData[0].dateJST);
        setGridValueByKey(gridGpsInfo,'start time', gGpsData[0].timeJST);
        setGridValueByKey(gridGpsInfo,'end date', gGpsData[ gGpsData.length-1 ].dateJST);
        setGridValueByKey(gridGpsInfo,'end time', gGpsData[ gGpsData.length-1].timeJST);
        setGridValueByKey(gridGpsInfo,'# of points', gGpsData.length);
        setGridValueByKey(gridGpsInfo,'min speed',Math.min.apply(null,gGpsData.map(function(o){return o.speed;})));
        setGridValueByKey(gridGpsInfo,'max speed',Math.max.apply(null,gGpsData.map(function(o){return o.speed;})));
        // パネルを開く(expand)
        $('#layoutMain').layout('expand','east');   
    }
    

    実行結果は以下のようになる。Start/End・Pointsの各項目がセットされた。
    gpsview05_a02

  • マーカーにイベントリスナを追加する

  • 各ポイントの場所にマーカーを表示しているが、このマーカーをクリックしたときに、該当ポイントの情報が表示されるようにする。

    function addListenerPoint(m_marker, m_content, m_idx){
        google.maps.event.addListener(m_marker, 'click', function(event){
            /*var infoWindow = new google.maps.InfoWindow({
             content: m_content
             })
             infoWindow.open(gMap, m_marker);*/
            // マーカーに紐付けられたポイントの情報(日時・経緯度など)をグリッドに表示する
            var md = gGpsData[m_idx];
            setGridValueByKey(gridGpsInfo, 'index', m_idx);
            setGridValueByKey(gridGpsInfo, 'date', md.dateJST);
            setGridValueByKey(gridGpsInfo, 'time', md.timeJST);
            setGridValueByKey(gridGpsInfo, 'longitude', md.lon);
            setGridValueByKey(gridGpsInfo, 'latitude', md.lat);
            setGridValueByKey(gridGpsInfo, 'speed', md.speed);
            setGridValueByKey(gridGpsInfo, 'direction', md.direction);
            setGridValueByKey(gridGpsInfo, '# satellites', md.numSat);
        });
    }
    

    これまで、クリック時には情報ウィンドウを表示していたが、今回コメントアウトしてグリッド表示に切り替える。
    マーカーをクリックすると以下のようになる。そのポイントの日時・経緯度等が表示された。
    gpsview05_a03

カテゴリー: Development タグ: , , パーマリンク