ブラウザでARやってみよう。 ~位置情報編~

2014.09.10(水) AR
このエントリーをはてなブックマークに追加

前回は、地磁気センサーをブラウザで利用してみましたが、今回は位置情報です。最近は、GPSから屋内でもWi-fiなどを利用して、かなり正確な位置情報が取得できますが、ブラウザでももちろんできます。


Step1. 位置情報を取得して地図を出そう

位置情報を取得するだけだとそれがどこなのか?よくわからないので地図を出そうかと思います。地図といえばもちろんGoogleMapsですね。GoogleMapsは非常に使いやすいJavaScriptAPIを用意していますので、取得した位置を中心とした地図をだしてみます。





さてさて、どうでしょうか?自分の場所の地図が表示されているでしょうか?navigator.geolocation.getCurrentPositionというメソッドを呼び出すと、位置が特定できた段階で、第1引数のcallback関数が呼び出され、そこに取得した緯度経度(pos)が返却されますので、その緯度経度座標をもとに、GoogleMapsを表示しています。
悩ましいのは、キャッシュの存在で、なかなかキャッシュがクリアされず、同じ場所が返されてしまうことがあります。それを防ごうと、一応、第3引数のオプションに、maximumAge=0としているんですが、これが効いてないみたいで、詳しい人がいたら教えてもらいたいものです。


GoogleMapsを表示するには、こちらを見てください。一瞬で出すことができると思います。今回は、JSFIDDLEを使ったので、わざわざタグをJavaScriptで追加していますが、通常はhtmlに記載すればOKです。

Step2. GoogleStreetViewでセカイカメラ風に

ARといえば、一昔前まではセカイカメラだったわけですが、今現在は、GoogleStreetViewでも、セカイカメラもどきなことができるようになっています。いや、これなにげにすごいですよ。セカイカメラ風ボタンを押すと、ストリートビューに変わりますので。





どうでしょうか?ストリートビューにマーカーが表示されていますでしょうか?されてない場合は、ぐるっと一回りみてみてください。これは、写真の中の緯度経度の位置を計算して出しているんだと思うんですが、これがほんの数行でできるわけですから、GoogleMaps恐るべしですね。残念ながら、ラインやポリゴンはまだでないみたいですが、多分時間の問題だと思います。そうなると、エンタープライズでも使えるかもしれないですね。


さてさて、次回はThree.jsによる3Dオブジェクト生成について書く予定ですので、こうご期待!

コメントをどうぞ