Nuxt.js / Vue.js で現在地情報を取得する

位置情報に基づく、コンテンツを配信したい場合、ユーザーの位置情報の取得は必須です。今回は Nuxt.js / Vue.js をベースにユーザーの位置情報を取得する機能を作っていきます。

Geolocation APIについて

位置情報を取得するには、多くのブラウザでサポートされているGeolocation API を使用します。これを用いることにより、ユーザーの緯度経度情報が取得できます。

Nuxt / Vue で実装する

Nuxt / Vue （単一ファイルコンポーネント）で実装していきます。コードはこちらです。

<template>
 <div>
   <button @click="getLocation">
     現在地付近
   </button>
 </div>
</template>

<script>
 data () {
   return {
     latitude: 0,
     longitude: 0
   }
 },

 methods: {
   getLocation () {
     if (process.client) {
       if (!navigator.geolocation) {
         alert('現在地情報を取得できませんでした。お使いのブラウザでは現在地情報を利用できない可能性があります。エリアを入力してください。')
         return
       }

       const options = {
         enableHighAccuracy: false,
         timeout: 5000,
         maximumAge: 0
       }

       navigator.geolocation.getCurrentPosition(this.success, this.error, options)
     }
   },

   success (position) {
     this.latitude = position.coords.latitude
     this.longitude = position.coords.longitude
   },

   error (error) {
     switch (error.code) {
       case 1: //PERMISSION_DENIED
         alert('位置情報の利用が許可されていません')
         break
       case 2: //POSITION_UNAVAILABLE
         alert('現在位置が取得できませんでした')
         break
       case 3: //TIMEOUT
         alert('タイムアウトになりました')
         break
       default:
         alert('現在位置が取得できませんでした')
         break
     }
   }
 }
</script>

詳細について説明します。

 <div>
   <button @click="getLocation">
     現在地付近
   </button>
 </div>

このコンポーネントをクリックすることで、getLocationメソッドを呼び出します。

if (process.client) {} 

Geolocation APIはクライアント側のメソッドなので、Nuxt.jsでサーバーサイドレンダリングを利用している場合、エラーになってしまいます。上記を記載することで、それを回避しています。

if (navigator.geolocation) {}

ユーザーが利用しているブラウザがGeolocation APIをサポートしているか判定しています。

navigator.geolocation.getCurrentPosition(this.success, this.error, options)

navigator.geolocation.getCurrentPositionメソッドを用いて、ユーザーの位置情報を取得します。this.success / this.error はコールバックとして呼び出されます。またoptionには、以下の項目が設定可能です。

maximumAge: 位置情報の保持期間(ミリ秒)
timeout: エラーコールバックが呼び出されるまでの時間(ミリ秒)
enableHighAccuracy: より正確な位置情報を取得するかどうか

位置情報を取得できた場合

コールバックとして以下を情報を取得できます。

coords.latitude	　緯度
coords.longitude　経度
coords.altitude	　高度
coords.accuracy	　取得した緯度、経度の精度
coords.altitudeAccuracy	取得した高度の精度
coords.heading	方角（0が北、90が東、180が南、270が西）
coords.speed　　速度（位置情報を追跡する場合に使用）

今回は、緯度経度をdataのlatitude / longitude に保存しています。

位置情報を取得できなかった場合

エラーコードが返却されます。コードはそれぞれ以下の意味を持つので、適切なalertを表示させています。

1:　PERMISSION_DENIED	　（ユーザーの位置情報へのアクセス許可がない）
2:　POSITION_UNAVAILABLE　（位置情報ソースの内部的なエラー）
3:　TIMEOUT	　　　　　　（option timeout で指定した制限時間内に位置情報を取得することができなかった）

まとめ

Nuxt.js / Vue.js をベースにGeolocation API を用いて、ユーザーの位置情報を取得する実装を行いました。