Help us understand the problem. What is going on with this article?

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に上げるかもしれませんので、許してください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした