2012-12-20

HTML5 Geolocation APIを使う (on rails)

HTML5のGeolocation APIを使ってみたので、使い方をメモ。
Ruby on Railsで使いたかったので、CoffeeScriptとjQueryも使ってみました。
実装にはViewとAssetの中にあるjavascript(CoffeeScript)を編集します。
記述内容はこんなかんじです。(必要部分のみ抜粋しました)

View: test/_form.erb
<div class="field">
 <%= button_tag("位置情報を取得", {:type => "button", :id => "test_getGeo", :name => "test_getGeo"}) %>
   <br />
   <%= f.label :latitude %>:&nbsp;<%= f.text_field :latitude %>
   <br />
   <%= f.label :longitude %>:&nbsp;<%= f.text_field :longitude %>
</div>


Asset(javascript): test.js.coffee
$ ->
  $('#test_getGeo').click ->
    navigator.geolocation.watchPosition (position) ->
        $('#test_latitude').val position.coords.latitude # 緯度
        $('#test_longitude').val position.coords.longitude # 経度


これを実行すると、
となり、"位置情報を取得"ボタンをクリックすると、対応しているブラウザであれば

こんな表示が出ます。
"許可"をクリックすることで緯度経度の数値が反映されます。

こんな感じ。

注意事項として、IE8以前のIEは対応していないようなので、エスケープするよう条件式を追加したほうがいいですね。

0 件のコメント:

コメントを投稿