Ajax + Google Maps 中間(最終?)報告

ここまでできた。


◆注意:最後の「東北ツーリング」はトラックデータのサイズが大きく(650KB/約6000件)、途中でハングする可能性が高いので、非力なPCではアクセスしないでください。◆
Google Maps APIやAjax自体は、ネット上で情報が流通していることもあり、さほど苦しむことなく実現できた。動画にもトライしてみたが、地図の縮尺によってはチラチラと動くのがかえって見にくいうえに、再生に時間がかかるため、静止画が無難なようだ。


GPS(Geko201)で記録した走行軌跡をGoogle Mapsに表示させるまでの手順は次のとおり。

  1. カシミール(バージョン8.6.0以後)でGeko201のトラックデータをダウンロードし、gpx形式(文字コードはUTF8)で保存する。
  2. 保存したファイルの拡張子を .xml に変更する。
  3. サーバにアップロードする。
  4. xml形式のトラックデータを読み込んでポイント間を線で結ぶ処理を行うHTMLページを呼び出す。

少し頭を使った点は、
  • 読み込むxmlは、HTMLと同じサーバにしておきたい。一般に開放すると問題が出そうだから。
    Ogawa::Memoranda さんの「プロキシ化」のアイデアにより解決。
  • ブラウザ全面表示したい。地図は大画面で見たいから。
    → 普通の方法ではFirefoxやOperaで正しく表示できない。ブラウザ起動時のウィンドウサイズを元に地図コンテナのDIVタグのサイズを決定することにした。IE6は document.body.clientHeight で正しい値を返してくれない点に苦労した。これは document.documentElement.clientHeight を使うことで解決。
  • 大容量トラックデータのロード中、” Loading… ” のメッセージを表示しておきたい。
    → innerHTMLにテキストを書き出すことで解決するかに見えたが、クライアントPCのプロセッサを激しく消耗することが判明。原因不明のため、ロード中の挙動には触れないことにした。
  • マウスホイールで地図の縮尺を変えられるようにしたい。
    → そこまで気合が続かなかった。気が向いたらやってみよう。
など。
実装にあたっては、
Ogawa::MemorandaAjaxを使ってKMLをGoogle Maps上にマップする
GEOCACHING (ジオキャッシング)の楽しみ方Google Maps APIを使って遊ぶ
を参考に(というより、コピーに近い)させてもらった。


2 Comments

  1. ども、imrさんこんにちは。
    Gekoを手に入れた直後、imrさんのサイトにせっせと日参し、GEOCACHINGのイロハを勉強させてもらいました。当時の勢いはどこへやら、私はGEOCACHINGはすっかりサボってますが。
    GarCaptureも使わせてもらってます。GPSユーザー系サイトとして、とても参考になる情報をいつも提供していただいてありがとうございます。この度、久しぶりにimrさんのサイトへ行って再び種々イロハを教えていただいた次第です。

imr へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA