Web版スマホ簡易ナビ(4/5)

現在位置を取得

最後に、現在位置を取得します。
現在位置の取得には、スマホのGPS機能を利用します。

ただし、WebブラウザでGPS情報を利用するには、2016年4月あたりから制限がでてきました。
どのような制限かというと、
https接続で通信していないとNG
というものです。
位置情報はプライバシー情報であると捉えて、昨今ではSSLによる暗号化通信(https接続)をしないと、位置情報が取得できないブラウザが増えてきました。

という訳で、位置情報を取得するプログラムは、SSL対応しているサイト(URLがhttpsで始まるサイト)に配置するようにしてください。

⇒【サンプル3−1】GPSから位置情報を取得(getCurrentPosition)

ブラウザがGeolocation APIをサポートしている場合、
navigator.geolocation.getCurrentPosition
を使用して、GPSから位置情報を取得できます。

また、定期的に位置情報を取得したい場合には、
navigator.geolocation.watchPosition
を使用します。
この関数はタイマー関数のsetIntervalと同じように、監視IDが返却されるので、監視IDを使ってイベントを停止することができます。

⇒【サンプル3−2】GPSから位置情報を定期的に取得(watchPosition)

【サンプル3−1ソース】
 GPSから位置情報を取得(getCurrentPosition)
<div>
  <input type="button" value="現在位置取得" onclick="getCurrentPosition()">
  <br /><br />
  ★結果★<br />
  <textarea id="geoInfo" rows="3" cols="30"></textarea>
</div>

<script type="text/javascript">
//現在位置取得
function getCurrentPosition(){
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successCallback, errorCallback,
       { maximumAge: 3000, timeout: 30000, enableHighAccuracy: true });
  } else {
    document.getElementById('geoInfo').value = "ブラウザがGeolocationに対応していません";
  }
}
//現在位置取得に成功した時の処理
function successCallback(position) {
  var result;
  result = "緯度:" + position.coords.latitude + "\r\n";
  result += "経度:" + position.coords.longitude;
  document.getElementById('geoInfo').value = result;
}
//現在位置取得に失敗の時の処理
function errorCallback(error) {
  document.getElementById('geoInfo').value = "Geolocationが利用できません";
}
</script>
【サンプル3−2ソース】
 GPSから位置情報を定期的に取得(watchPosition)
<div>
  <input type="button" value="現在位置取得開始" onclick="startWatchPosition()">
  <input type="button" value="停止" onclick="stopWatchPosition()">
  <br /><br />
  ★結果★<br />
  <textarea id="geoInfo" rows="3" cols="30"></textarea>
</div>

<script type="text/javascript">
var watchId;  //監視ID

//現在位置取得開始
function startWatchPosition(){
  if (navigator.geolocation) {
     //★現在の位置情報を定期的に取得
     watchId = navigator.geolocation.watchPosition(successCallback, errorCallback,
                 { maximumAge: 3000, timeout: 30000, enableHighAccuracy: true });
  } else {
    document.getElementById('geoInfo').value = "ブラウザがGeolocationに対応していません";
  }
}
//現在位置取得に成功した時の処理
function successCallback(position) {
  var result;
  result = "緯度:" + position.coords.latitude + "\r\n";
  result += "経度:" + position.coords.longitude;
  document.getElementById('geoInfo').value = result;
}
//現在位置取得に失敗の時の処理
function errorCallback(error) {
  document.getElementById('geoInfo').value = "Geolocationが利用できません";
}

//現在位置取得停止
function stopWatchPosition(){
  navigator.geolocation.clearWatch(watchId);
  document.getElementById('geoInfo').value = "位置情報の取得を停止しました";
}
</script>

あなたへのおすすめ記事