最後に、現在位置を取得します。
現在位置の取得には、スマホのGPS機能を利用します。
ただし、WebブラウザでGPS情報を利用するには、2016年4月あたりから制限がでてきました。
どのような制限かというと、
「
https接続で通信していないとNG」
というものです。
位置情報はプライバシー情報であると捉えて、昨今ではSSLによる暗号化通信（https接続）をしないと、位置情報が取得できないブラウザが増えてきました。
という訳で、位置情報を取得するプログラムは、SSL対応しているサイト（URLがhttpsで始まるサイト）に配置するようにしてください。
⇒【サンプル３−１】GPSから位置情報を取得（getCurrentPosition）
ブラウザがGeolocation APIをサポートしている場合、
navigator.geolocation.getCurrentPosition
を使用して、GPSから位置情報を取得できます。
また、定期的に位置情報を取得したい場合には、
navigator.geolocation.watchPosition
を使用します。
この関数はタイマー関数のsetIntervalと同じように、監視IDが返却されるので、監視IDを使ってイベントを停止することができます。
⇒【サンプル３−２】GPSから位置情報を定期的に取得（watchPosition）
【サンプル３−１ソース】
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>
【サンプル３−２ソース】
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>