地図の中心を、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); });