iPhone GPS機能と連携
位置情報の取得
- 「iPhone3G(S)」「iPhone4(S)」には、「Wi-Fi」「携帯電話ネットワーク」「GPS」を組み合わせて現在位置を割り出す機能がついています
- 「iPhone > 設定 > 一般」から「位置情報サービス:オン」に設定しておく必要があります
Geolocation API を利用する
- 「位置情報」を利用するには、JavaScript内でイベントハンドラを登録します
navigator.geolocation.watchPosition(successFunc, errorFunc);
「navigator」オブジェクトの「geolocation」を利用し、「watchPosition」メソッドによって連続的に位置情報を取得します。
位置情報が取得できた場合は、「successFunc」関数が実行され、エラーが起きた場合は「errorFunc」関数が実行されます。
<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>iPhone 位置情報取得</title> <script> //正常に緯度経度情報が取得できた時に呼ばれる関数 function successFunc(e){ var gps = document.getElementById("gps"); gps.innerHTML = ("Lat:" + e.coords.latitude + " Long:" + e.coords.longitude); } //エラーが起きた場合に呼ばれる関数 function errorFunc(e) { var gps = document.getElementById("gps"); switch (e.code) { case 1: gps.innerHTML = "エラー:GPSの利用が許可されていません。GPSを使えるように設定してください。"; break; case 2: gps.innerHTML = "エラー:位置情報が取得できませんでした。"; break; case 3: gps.innerHTML = "エラー:タイムアウトしました。"; break; default: gps.innerHTML = "エラー:位置情報を表示できませんでした。"; break; } } navigator.geolocation.watchPosition(successFunc, errorFunc); </script> </head> <body> <div id="gps"></div> </body> </html>
取得した位置情報を地図に表示
- 「watchPosition」メソッドは、経度緯度情報を連続的に送ってきます
- 正常に経度緯度情報が取得できたときは、「successFunc」関数が実行されます
- 前回の位置情報と変化があったかをチェックし、変化があった場合のみ地図を更新するようにします
- 「e.coords.latitude」で緯度を、「e.coords.longitude」で経度を取得します
- 縮尺レベル「zoom」と地図の中心位置「center」と地図タイプ「mapTypeID」を設定し、「google.maps.Map」で地図を生成して「map_canvas」に表示します
<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>iPhone 位置情報取得</title> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script> //経度緯度用変数を初期化 var latitude = ""; var longitude = ""; //正常に緯度経度情報が取得できた時に呼ばれる関数 function successFunc(e){ //前回の緯度経度情報と比較して、変わっていたら地図を更新 if( (e.coords.latitude != latitude) || (e.coords.longitude != longitude) ){ //緯度を取得 latitude = e.coords.latitude; //経度を取得 longitude = e.coords.longitude; //緯度経度を設定 var myLatLng = new google.maps.LatLng(latitude,longitude); //オプションを設定 var myOptions = { zoom: 16, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP } //地図を生成し、指定したHTMLエレメントに表示 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } // マーカーの表示 var marker = new google.maps.Marker({ position: myLatLng, map: map, draggable: true, // ドラッグ可能にする title: "" }); } //エラーが起きた場合に呼ばれる関数 function errorFunc(e) { switch (e.code) { case 1: alert("エラー:GPSの利用が許可されていません。GPSを使えるように設定してください。"); break; case 2: alert("エラー:位置情報が取得できませんでした。"); break; case 3: alert("エラー:タイムアウトしました。"); break; default: alert("エラー:位置情報を表示できませんでした。"); break; } } navigator.geolocation.watchPosition(successFunc, errorFunc); </script> </head> <body style="margin:0px; padding:0px;"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>