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 %>: <%= f.text_field :latitude %>
<br />
<%= f.label :longitude %>: <%= 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 件のコメント:
コメントを投稿