トラッキング機能を実現する(1)

地図の中心を、GPSデータの各ポイントに一定時間ごとに移動することで、「トラッキング機能」を実現する。

  • コンソールパネルの作成

  • 上(north)パネルにボタンを並べて、コンソールパネルを作る。

    <div data-options="region:'north',iconCls:'icon-ok'" title="Tracking Console"  style="height:80px;">
        <button type="button" id="btnConsoleGoFirst" title="Go to the first point"><img src="images/icon_player/b_first.png" /></button>
        <button type="button" id="btnConsolePlay" title="Play"><img src="images/icon_player/b_play.png" /></button>
        <button type="button" id="btnConsolePause" title="Pause"><img src="images/icon_player/b_pause.png" /></button>
        <button type="button" id="btnConsoleStop" title="Stop"><img src="images/icon_player/b_stop.png" /></button>
        <button type="button" id="btnConsoleGoLast" title="Go to the last point"><img src="images/icon_player/b_cursor.png" /></button>
    </div>
    

    これを表示すると以下になる。
    gpsview05_b01

  • 移動ボタン:最初・最後のポイントに移動

  • jQueryのイベントハンドラを利用して、ボタンをクリックした時の処理を記述する。
    - 地図の移動: panTo() メソッドを利用する。これで、指定した経緯度が中心になるように地図を利用する。
    - ズームレベルを調整する。
    - 最初(最後)のポイントの情報を情報パネルに表示する。

    $('#btnConsoleGoFirst').live('click',function(){
        gMap.panTo(new google.maps.LatLng(gGpsData[0].lat,gGpsData[0].lon));
        gMap.setZoom(16);
        showGridGpsInfoP(0);
    });
    
    $('#btnConsoleGoLast').live('click',function(){
        gMap.panTo(new google.maps.LatLng(
         gGpsData[ gGpsData.length-1 ].lat,gGpsData[ gGpsData.length-1 ].lon));
        gMap.setZoom(16);
        showGridGpsInfoP(gGpsData.length-1);
    });
    

    「最初のポイントに移動」ボタンをクリックした結果は以下のとおり。
    gpsview05_b02

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