はじめに
Geolocation APIを使って現在位置を取得する方法の簡単なまとめです。
ブログにも同様の内容を投稿しています。
概要
- Geolocation APIの概要
- 実際に現在位置を取得する
Geolocation API
Geolocation APIとは、ユーザの位置情報を取得するためのAPIです。
GPS、IPアドレス、無線LAN、WiFiなどから位置情報を取得することができます。
位置情報を取得するためには、ユーザの許可が必要です。
Geolocation APIのオブジェクト
Geolocation APIのGeolocationオブジェクトはデバイスの位置を取得する機能を提供します。
Geolocationオブジェクトを取得するには、Navigatorオブジェクトのgeolocationプロパティを使用します。
Geolocationオブジェクトのメソッドは以下です。
| メソッド | 説明 |
|---|---|
| getCurrentPosition() | デバイスの現在位置を取得する |
| watchPosition() | デバイスの位置情報を監視する |
| clearWatch() | watchPosition()メソッドで取得中のデバイスの監視状況をクリアする |
getCurrentPosition()、watchPosition()では、引数としてコールバック関数を指定できます。
指定できるコールバック関数は以下です。
| コールバック関数 | 説明 |
|---|---|
| PositionCallback | 位置情報の取得が成功したときに呼び出されるコールバック関数 Positionオブジェクトを引数とする |
| PositionErrorCallback | 位置情報の取得が失敗したときに呼び出されるコールバック関数 PositionErrorオブジェクトを引数とする |
PositionCallbackの引数となるPositionオブジェクトは現在位置を表します。
Positionオブジェクトのプロパティは以下です。
| プロパティ | 説明 |
|---|---|
| coords | 現在位置情報を持つCoordinatesオブジェクトを取得する |
| timestamp | 位置情報が取得された時間を取得する |
Coordinatesオブジェクトから取得できる現在位置情報は以下です。
他にも取得できる情報はありますが、今回は省略します。
| プロパティ | 説明 |
|---|---|
| latitude | 緯度を取得する |
| longitude | 経度を取得する |
| altitude | 高度を取得する |
実際に現在位置を取得してみる
Geolocation APIを使って、緯度と経度を取得してみます。
今回は取得した位置情報を画面に表示するだけの簡単な画面を作成しますが、いずれは取得した位置情報を利用して、Mapと連携できるといいなと考えています。
まず、簡単な画面を作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Geolocation Sample</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="center">
<div class="btn-margin">
<button id="btn" class="btn btn-outline-primary btn-lg">
現在位置を取得する
</button>
</div>
<div class="txt-margin">
<p>緯度：<span id="latitude">???</span><span>度</span></p>
<p>経度：<span id="longitude">???</span><span>度</span></p>
</div>
</div>
<script src="geolocation.js"></script>
</body>
</html>
ブラウザで表示してみるとこのようになります。
次に、ボタンを押した時の処理を書きます。
ボタンがクリックされたときにgetCurrentPosition()メソッドを使用して位置情報を取得します。
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
取得に成功した場合、successCallbackコールバック関数が呼び出されます。
function successCallback(position){
};
successCallbackの中で、緯度と経度を取得します。
取得した緯度と経度を画面の<span>に表示します。
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById("latitude").innerHTML = latitude;
document.getElementById("longitude").innerHTML = longitude;
取得に失敗した場合、errorCallbackコールバック関数が呼び出されます。
function errorCallback(error){
};
errorCallbackの中で、画面にアラートを表示します。
alert("位置情報が取得できませんでした");
上記のコードをまとめると、このようになります。
// ボタンを押した時の処理
document.getElementById("btn").onclick = function(){
// 位置情報を取得する
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
};
// 取得に成功した場合の処理
function successCallback(position){
// 緯度を取得し画面に表示
var latitude = position.coords.latitude;
document.getElementById("latitude").innerHTML = latitude;
// 経度を取得し画面に表示
var longitude = position.coords.longitude;
document.getElementById("longitude").innerHTML = longitude;
};
// 取得に失敗した場合の処理
function errorCallback(error){
alert("位置情報が取得できませんでした");
};
これを実際に動かしてみます。
現在位置を取得するボタンを押下すると、
現在位置の情報が画面に表示されています。
取得に失敗した場合は、
このようにアラートが表示されます。
おわりに
Geolocation APIをはじめて使ってみましたが、簡単に位置情報を取得できることにびっくりしました。
簡単なまとめですが、誰かの助けになれば幸いです。