目次
サンプル | getCurrentPositionメソッド |
実行時の挙動 |
getCurrentPositionメソッド
navigator.geolocation.getCurrentPosition(success, error, options) |
- 現在位置の取得にはnavigatorオブジェクトの中のgeolocationオブジェクトのgetCurrentPositionメソッドを使用します。
- 現在位置の取得に成功するとsuccessのコールバック関数が実行されます。
- 現在位置の取得に失敗するとerrorのコールバック関数が実行されます。
- optionsはオプションを指定します。
- 以下はMDNのGeolocationのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geolocation
サンプルのコードです。
<p id="test1"></p>
<p id="test2"></p>
<script>
// geolocationを利用できるか確認
if (navigator.geolocation) {
//現在位置を取得する
navigator.geolocation
.getCurrentPosition(success,error,options);
var options = {
// enableHighAccuracyは、GPSの精度でtrueかfalseをセットする
// trueだと精度が高くなる
enableHighAccuracy: true,
//timeoutは、タイムアウト時間でミリ秒単位
timeout: 1000,
// maximumAgeは、キャッシュ有効時間でミリ秒で表す
// 0の場合、常に最新の情報を取得する
maximumAge: 0
};
// 成功時
function success(position) {
var crd = position.coords;
// Positionオブジェクトの中にあるcoordsオブジェクトの
// latitudeとlongitudeプロパティを参照
document.getElementById("test1")
.textContent = "経度 : " + crd.latitude;
document.getElementById("test2")
.textContent = "緯度 : " + crd.longitude;
};
// 失敗時
function error(err) {
// PositionErrorオブジェクトの
// codeとmessageプロパティを参照
document.getElementById("test1").textContent
= "エラーコード : " + err.code;
document.getElementById("test2").textContent
= "エラーメッセージ : " + err.message;
};
} else {
document.getElementById("test1").textContent
= "このブラウザではGeolocationの使用はできません";
}
</script>
6行目は、実行環境で利用できるか確認しています。
9,10行目は、getCurrentPositionで現在位置を取得しています。
12-21行目は、オプションです。
24-33行目は、成功時に実行する関数です。
36-43行目は、失敗時に実行する関数です。
実行時の挙動
上記コードを実行するとブラウザが現在地の取得の許可を求めてきます。
「許可」を押すと、正常終了すれば経度と緯度が表示されます。
「ブロック」を押すと、以下のようにエラーコードとエラーメッセージが表示されます。
関連の記事