[VueJs] Geolocation API 개념 및 예제

 

 

Geolocation API

사용자가 원할 경우 웹 애플리케이션에 위치 정보를 제공할 수 있는 API

브라우저는 위치 정보를 제공하기 전에 사용자에게 위치 정보 권한에 대한 확인을 받는다.

 

Method

• Geolocation.getCurrentPosition() : 장치의 현재 위치를 가져옴
• Geolocation.watchPosition() : 장치의 위치가 바뀔 때마다, 자동으로 새로운 위치를 사용해 호출할 처리기 함수 등록

 

Parameter

• Success CallBack ( essential )
• Error CallBack ( optional )
• Options ( optional )

 

Interface

• Geolocation : Geolocation API의 주요 클래스로, 사용자의 현재 위치를 가져오고, 위치 변경을 감지하고, 이전에 등록했던 감지기를 제거하는 메서드를 담고 있음
• Navigator.geolocation : API 접근 지점. Return Geolocation Instance

 

---

 

setup

npm install --save vue-geolocation-api

 

vue instance

import Vue from 'vue'
import VueGeolocationApi from 'vue-geolocation-api'
 
Vue.use(VueGeolocationApi/*, { ...options } */)

 

main.vue

<div>
  <button @click='geofind'>위치찾기</button>
  <p> {{textContent}} </p>
</div>

 

data () {
        return {
            latitude: '',
            longitude: '',
            textContent: ''
        }
    }

 

geofind() {
            if(!("geolocation" in navigator)) {
            this.textContent = 'Geolocation is not available.';
            return;
            }
            this.textContent = 'Locating...'
            
            // get position
            navigator.geolocation.getCurrentPosition(pos => {
            this.latitude = pos.coords.latitude;
            this.longitude = pos.coords.longitude;
            this.textContent = 'Your location data is ' + this.latitude + ', ' + this.longitude
            }, err => {
            this.textContent = err.message;
            })
        }