Zenn
🌏

Geolocation APIを使って現在位置を取得する

2021/07/16に公開
JavaScript
HTML 5
geolocation
tech

はじめに

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と連携できるといいなと考えています。

まず、簡単な画面を作成します。

index.html
<!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("位置情報が取得できませんでした");



上記のコードをまとめると、このようになります。

geolocation.js
// ボタンを押した時の処理
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を初めて使ってみましたが、簡単に位置情報を取得できることにびっくりしました。簡単なまとめですが、誰かの助けになれば幸いです。

Discussion