[GPSとウエブサービス]10日目: ウエブサービスをつくるその6(JavaScript解説)

2006年9月21日 23:31 | 個別ページ | トラックバック(9)

もう10日目になってしまいました... 今回は前回貼付けたJavaScriptを解説したいと思います。
JavaScriptは基本的なザックリ言うとは2つのクラスとそれを呼ぶ部分で構成されています
2つのクラスはそれぞれ

GoogleMapを操作するクラス(GoogleMapControl)
GPS経路情報を管理/操作するクラス(RouteControl)

です。まずは GoogleMapControlクラスを解説します。
JavaScriptでクラスを作る方法はいくつかあるようですが、このソースでは

function GoogleMapControl(id, init_lat, init_lng) {
(ここにコンストラクタ的な処理を記述する)
}
GoogleMapControl.prototype.HOGEHOGE = function() {
(ここにHOGEHOGEメソッドに関する処理を記述する)
}
インスタンス化は
var objMap = new GoogleMapControl('map', init_lat, init_lng);

のように行う形で記述しています。

GoogleMapControlクラス(004-086行目)は何を行うクラスかを解説します。
コンストラクタでGoogleMapのSetupを行う。ピンアイコン(2種類)もメンバ変数として
Setupしておく。
メソッドは以下の関数を設置

addUserPoint: Userの現在地点を1点プロット
addGPSPoint : GPS軌跡ポイントの1点プロット

showUsers : ユーザの最新位置リスト(APIの戻りJSON形式をそのまま)を引数にその各点をaddUserを用いてプロット
showRoute : GPS軌跡リスト(同じくJSON形式)を引数にその各点をaddGPSPlotを用いてプロット

panTo : 指定座標にMap中心を合わせる
ClearOverlays : 全プロットをClear

以上のようなGoogleを操作するクラスを定義します。
このようにGoogleMapを使うときはその操作をクラスでまとめた方が便利ですからお勧めデス。

では次にRouteControl(091-122)について解説します。
このクラスは各ユーザのGPS経路情報が出力される際にコンストラクトされます。
Web画面上に Next | Prev の経路操作ができるナビゲーションが表示されますが、
今の中心位置を管理し、次のpointや前pointを操作して取り出す機能を持っています。

コンストラクト時は各変数初期化しメンバ変数にAPIから取得した経路情報をセットします。
メソッドには次の関数を持ちます

setPosition : GoogleMapのpanTo関数を用いて地図画面の中心位置を合わせるとともに情報エリアをSetします
next : 次の点に移動します
prec : 前の点に移動します
clear : 経路情報をクリアします

次にメインの部分ですが、ここは簡単です。
init 関数が HTMLのonload時に呼ばれます。
ここではGmapControlをインスタンス化しGoogleMapの画面初期出力を行います
次にgetRecentUsersという関数を読んで利用者の最終GPS捕捉位置をプロットします。
この関数は prototype.js Ajaxクラスを利用しています。このクラスの使い方は
たくさんのHPに書いてありますから割愛します。

各ユーザのpointをプロットした後、そのプロット点にはonClickのイベントが
GoogleMapControlクラス内で既に割り当てられており(053-055行目)クリックする
ことでgetUserGPS関数が呼ばれます。ここもほとんど上と同じで Ajaxクラスで
APIを呼び出しています。

細かい部分はソース読んでもらばと思います

以上でJavaScriptの部分も解説しました。以上すべてを組み合わせると

http://hiyuzawa.jpn.org/mob/at_gps/

このようなサイトが出来上がります。

いかがでしたか？　10回で解説しましたが、最後はかなり、雑な説明でしたけど
一通り理解して頂けたと思います。

またいろんなサービスを作ると思いますが、面白いものはこのように解説してみたいと思います。
では、ご覧いただき有り難うございました。