注意しておくべきなのは、全てのデバイスで使用できるわけではありません。搭載されているソフトウェアやハードウェアによります。また、位置情報はユーザが許可しない限り取得されません。
| <!doctype html> <head> <meta charset=“UTF-8” /> <title>Geolocation test</title> <script type=“text/javascript” src=“http://maps.google.com/maps/api/js?sensor=true”></script> </head> <body> <h1>Geolocation test</h1> <div id = “status”>位置情報取得中...</div> <div id = “gmap” style=“width:900px;height:900px;”></div> <script> var mapOptions = { zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“gmap”), mapOptions); var infowindow = new google.maps.InfoWindow(); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var time = position.timestamp; var currentPosition = new google.maps.LatLng(lat, lng); document.getElementById(“status”).innerHTML = “位置情報取得しました”; map.setCenter(currentPosition); contentString = “現在値”; infowindow.setContent(contentString); infowindow.setPosition(currentPosition); infowindow.open(map); }, function(error){ document.getElementById(“status”).innerHTML = “error : “ + error.code; } ); } else { document.getElementById(“status”).innerHTML = “Geolocation APIに対応してません”; }; </script> </body> </html> |
<解説>
■Google Mapを使用するためには、下記を追加します
<script src=“http://maps.google.com/maps/api/js?sensor=true”></script>
■getCurrentPositionメソッド
現在位置を取得するメソッドであり、戻り値はありません。
引数は３つとれます。
第一引数：位置情報が格納したPositionオブジェクト(位置情報と取得した時間)が渡される
第二引数：エラー情報を格納したPositionErrorオブジェクトが渡される
第三引数：精度や有効期間を格納したPositionOptionsオブジェクトが渡される
実際にここから現在位置を取得してみましょう。
FireFox3.6以降、GoogleCrome11.0.696.68以降で動いたのを確認しています。
新しいブラウザはGeolocationの規格に対応するようになってきていますが、一部ブラウザでは位置情報を取得できないものもあります。
位置情報アプリはこれから様々な用途で利用されるでしょう。
例えば、地震被災者の居場所を特定する地震安否確認、自分の位置も確認できる道案内アプリ、友達がどこにいるのか情報を求める友達場所検索アプリなどなど。
こんな面白そうなJavaScript APIを見つけてしまったので、JavaScriptもこれから学ぼっと。
参考URL :
http://code.google.com/intl/ja/apis/maps/documentation/javascript/basics.html
0 件のコメント:
コメントを投稿