Traditional on the Ice

ARTICLE PAGE

-- --

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
06 2014

Google Maps API 練習

仕事でこの分野に触れる機会が徐々に増えつつあるので、Google Maps API について少し勉強を始めました。 手始めに「ルート検索をして、方向転換等のポイントで現地の画像を取得する処理」をコーディング。

※実行結果は少し重いので「続きを読む」の先に隠しています。

  • 地図を描画
  • あらかじめ指定した2地点間(新宿駅南口、都庁付近)のルート計算
    • 今回はとりあえず出発地・目的地は固定
  • ルート上の各Stepにおいて、下記の情報を表示
    • その地点に到着した時に見えるであろう風景
    • 次の行動
    • 次の行動の方向に見えるであろう風景(右折なら右側の風景)

ルート計算は、directionsService.route() メソッドで計算して directionsDisplay.setDirections() メソッドで描画してもらってます。描画がお手軽で良いです。
現地の画像取得は、directionResult オブジェクトから各ステップの座標情報を取得した後、一つ前の地点と現在の地点から到着時の画角(方角)を、現在の地点と一つ先の地点から次の方向の画角(方角)をそれぞれ計算し、それを Google Street View Image API に渡して実現しています。JavaScript 版のストリートビューの埋め込みは今後勉強することとして、今回はとりあえず静的な画像を取得することで簡易に実現しました。

やってみた感想としては取りあえず動くモノは意外と簡単に作れるということと、ここから実用レベルのサービスを作るのは相当大変だということ。今回画角は2点間の座標から計算していますが、これは比較的碁盤の目のような地形であれば良いのですが、道が曲がりくねったりすると方向がずれてくるのは容易に想像できます。本当はルート上の少し手前の点から角度の変化を計算していって、確からしい画角を算出するなどの方法が必要なのかもしれません。

自分自身は直接コーディングする仕事ではありませんが、感覚を養うためにも継続して勉強します。
一番の難関は7年ぶりぐらいに触る JavaScript だったり(笑)

- 0 Comments

Leave a comment

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。