Posted at

VueでGeolocation APIを使い、コンポーネントが呼び出された際に位置情報を取得できるようにする


はじめに

今回はVueでgeolocation APIを使って位置情報を取得できるようにしたのでメモ。


実装

今回はVue cli3を利用してTypescriptのVueプロジェクトを立ち上げた。

最初のHelloWorldのコンポーネントが呼び出された際に位置情報を取得して緯度と経度をalarmで呼び出せるようにする


Helloworld.vue

<template>

<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a
>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank"
rel="noopener"
>babel</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
target="_blank"
rel="noopener"
>typescript</a
>
</li>
</ul>
<h3>Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
>Forum</a
>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
>Community Chat</a
>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
>Twitter</a
>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
</li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
>vue-router</a
>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-devtools#vue-devtools"
target="_blank"
rel="noopener"
>vue-devtools</a
>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
>vue-loader</a
>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
rel="noopener"
>awesome-vue</a
>
</li>
</ul>
</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
public mounted() {
this.initGeolocationSearch();
}

public initGeolocationSearch() {
new Promise((resolve, reject) => {
if (window.navigator.geolocation) {
window.navigator.geolocation.getCurrentPosition(
(response) => {
resolve(response);
},
() => {
alert('データの取得中にエラーが発生しました。');
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 10000,
},
);
} else {
reject('このブラウザでは位置情報を取得できません');
}
})
.then((response: any) => {
const { latitude, longitude } = response.coords;
alert(`緯度: ${latitude}, 経度: ${longitude}`);
})
.catch(() => {
alert(
'データが取得できませんでした。電波の届きやすい場所で再度お試しください。',
);
});
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>



まとめ

これでうまく位置情報が呼び出されれば完了。

実際のプロダクトではエラーコードによって、エラーメッセージを分けて表示させるのが理想である。