Nuxtで現在地情報を取得して利用する

ごめん、アドベントカレンダーはかけません。いま、HackDayにいます。この国をちょっと便利にするソリューションを作っています。……本当は、あの頃が恋しいけれど、でも今はもう少しだけ、知らないふりをします。私の作るこのアイデアも、きっといつか誰かの青春を乗せるから。

はじめに

と、言うわけで、現在、HackDay2019の会場でこの記事を執筆しています。
限界開発ですでに心が折れそうなのですが、本日はYumemiアドベントカレンダーの自分の担当日なので頑張って書いています。

今、目の前のチームメンバーが発狂しました。

さて、今回のお題ですが。フレッシュな内容ということで、HackDayでちょうど詰まった内容を投稿します。

やりたかったこと

Webページを使用しているユーザーの現在位置を取得して、APIに渡したかった。

やったこと

GeoLoacationAPIを使った。

GeoLocationAPIとは？

Geolocation API により、ユーザーは希望すれば自身の場所をウェブアプリケーションに通知することができるようになります。なお、プライバシー保護の観点から、ユーザーは位置情報が送信される際には確認を求められます。

Mozilaより

と、言うわけでたまにブラウザを開いているユーザーの現在位置を取得できるAPIです（そのまま）

例えば現在位置の緯度経度を取得する場合はこう

navigator.geolocation.getCurrentPosition(function(position) {
  console.log(position.coords.latitude, position.coords.longitude);
});

注意点として、現在位置を取得するにはある程度時間がかかるので、非同期的に処理する必要があります。

実際のコード

<script>
export default {
    mounted: {
       const position = await this.getPosition()
         .then((position) => {
            return {
              latitude: position.coords.latitude,
              longitude: position.coords.longitude
            }
          })
          .catch((err) => {
            console.error(err.message)
          })

       this.latitude = position.latitude
       this.longitude = position.longitude
       do_something(this.latitude, this.longitude)
    },
    methods:{
      getPosition(options) {
        return new Promise(function(resolve, reject) {
          navigator.geolocation.getCurrentPosition(resolve, reject, options)
        })
      }
    }
  }
}
</script>

見ての通り、無理やりPromiseにして返却しています。

注意点として、現在位置を利用するので、ユーザーの許可がなければ使えません。その場合の例外処理もしっかり書いておきましょう。

最後に

限界開発の真っ最中なので内容薄めで申し訳ございません。
後々HackDayで得た他の知見もQiitaに上げるかもしれませんので、許してください。