2014年10月28日火曜日

Google Maps API V3でトレースしていくローバー

前回のブログでGoogle MapsのAPIキーの取得ができたました。
それから、家に帰ってから一日一時間くらいコード書きに費やして、週末地区の旅行に行ったり、いろいろあったが、何とかでけた。

最終目的はGooglemapで現在位置から四角いエリアを指定して、エリア内を隈なくトレース線を引き、その線に沿って実際の場所をトレースしていくローバーを作ろうかと。

 エリア指定と自動トレース線生成機能はHTML5のJavaScriptでできました。




ＨＴＭＬ５なので、容易にスマフォアプリにできます。

プログラミングは、基本的に　ここのサンプルコード　をコピペするだけの簡単なお仕事なんですが、ごたぶんにもれず、何箇所かはまったので。備忘録として。

まず、APIキーで実行できるサイトのドメインは公開 API へのアクセスで、リファラーで指定。
そのせいと思われるが、ローカルファイルで実行すると、JavaScriptアラートがでて実行できない。
いろいろしらべてみたが、結局、会社のサイトにFTP転送してデバックした。
それほど手間でないからいいけど。

現在位置の取得は　Geolocationサンプル　の丸写しでいいのですが、最初、会社のブラウザでは長野県庁、家のブラウザでは伊那市市役所が現在位置になりました。たぶんプロバイダのＤＮＳの住所なんでしょうね(会社はＯＣＮ．家は伊那ケーブルテレビなんで)
で、ローバー実験場所が公園を想定していたので、会社の近くの春日公園の緯度、経度を指定。
で、ここでめんどくさいので　位置の変数posはグローバル変数にした。
 // Try HTML5 geolocation　//春日公園　35.837382, 137.948009
var pos = new google.maps.LatLng(35.837382, 137.948009);
if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
とりあえず、現在位置を取得するコードはコメントアウトして、その下にずらずらとコードを書いた。
ある程度上手くいったので現在位置を取得するようにコメントアウトを外すと、上手くいかない。
現在位置取得までタイムラグがあるんかな？。
いろいろ調べてみると、成功コールバック関数使って、現在位置を取得出来たらnavigator.geolocation.getCurrentPosition(function(position) {}　ブロックを呼び出すとのこと。
こいつは非同期関数とのことでなので、コードの上からの順でやっているわけではない。
まぁ、現在位置は刻々と変わることが多いので、非同期が都合がよいわな。
確かに現在位置が取得できた時点でpos 変数は上書きされている。
が、そのタイミングは不定なので、下に書いたコードが先に実行されてしまう。
現在位置が取得された時点で成功コールバック関数のブロックが有効になるということなので、Pos 変数を使ういろいろな処理は成功コールバック関数ブロック内に書くか、ブロック内から処理関数を呼び出せばいいようだ。
非同期のコールバック関数とか慣れてないので、はまった。

次に現在位置から北に50m、そこから東に50m、そこから南に50m、そして出発点の戻るエリアを書きたい。
GoogleMap上では緯度、経度で位置指定するので、距離とか方向で場所を指定するには計算しなければならない。
難しくはヒュベニの式を用いた、緯度・経度と距離・方位の相互変換の解説ということだが、ちゃんとジオメトリ ライブラリで計算するcomputeOffset() 関数は用意されているので簡単である。

 var spherical = google.maps.geometry.spherical;
north = spherical.computeOffset(pos, 50, 0);

とすれば北50mの座標が取得できる。

 編集するポリゴンのサンプルがあったので、ほぼ丸写し。
ただポリゴンの各辺中間のゴーストポイント(GP)という動かせるポイントがあって、GPを動かすとさらにGPが出来るといった具合にどんどん複雑なエリアに編集できる。
これはちょっと都合が悪いのでGPを無効にしたい。
調べると、API-V2では頂点数の指定ができたらしいが、V3からは無いので、このままのようです。

 動かしたポリゴンの頂点の座標はポリゴンのオブジェクトをdrivePolyとして
var polyPath = drivePoly.getPath();
で配列に代入して north = polyPath.getAt(1);
で配列から取り出します。
http://stackoverflow.com/questions/14948337/getpaths-polygons-google-maps-api
らへんを参考にしました。

 あとは、ポリゴンの頂点座標から対角線1mずつ内側に線を引いていくようにして、ローバーのトレース線を引くようにしました。

いちお、ほかに参考になる資料としてサイトを検索しましたが、API　V2版の解説が多いですね。
API-V2からV3の変更点が載っていた書籍がgoogleブックスで発見。

Google API Expertが解説する Google Maps APIプログラミングガイド

著者: 勝又 雅史、古籏 一浩、石丸 健太郎、安藤 幸央ちゃんとこれ読めばいいのですが、ちょっとしか見てないです。
あと、グーグルグループのGoogle-Maps-API-Japanなんかには最新情報があります。

ローバーはタミヤのラジコンカーを改造予定。仕事の合間に今年中の完成目標です。
できるかな？
駆動はステッピングモーターかな？ブラシレスモーターのESCにつなぐのもラジコンの応用が出来ていいんだけど。

ヨドバシカメラで7千くらい、すぐ買って試したいがプログラムができるまで我慢。

投稿者 時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)