トラッキング機能を実現する(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>

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


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

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);
});

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