iOS 및 Android용 VueJS와 함께 기본 GPS 사용

안녕, 지구를 정복하고 싶은 사람들! 인간 btw

오늘은 Android 또는 iOS 대상 VueJS 앱 내에서 GPS를 사용하는 방법을 보여 드리겠습니다.

VueJS를 모바일 앱에 통합하는 방법을 이해할 수 없다면 제 지난 게시물을 확인하세요!

콘덴서를 아시나요?

Capacitor는 Ionic에서 개발한 라이브러리로 JavaScript 코드 및 Native Mobile 기능과 결합합니다.

오늘 우리는 GPS에 대해 이야기하지만 커패시터에는 많은 기능이 있습니다.

https://capacitorjs.com/docs/getting-started

첫 번째는 프로젝트 애플리케이션 내부에서 커패시터를 초기화하는 것입니다.

npm install @capacitor/core @capacitor/cli

다음 실행

npx cap init

내부에서 빌드 디렉토리를 변경하는 것을 잊지 마십시오capacitor.config.js.

지금

사용자로부터 GeoLocation을 얻으려면 응용 프로그램 내부에서
당신은 사용

import { Plugins } from '@capacitor/core';

const { Geolocation } = Plugins;
export default {

methods:{
  async getCurrentPosition() {
    const coordinates = await Geolocation.getCurrentPosition();
    console.log('Current', coordinates);
  },
  watchPosition() {
    const wait = Geolocation.watchPosition({}, (position, err) => {
    })
  }
}
}

이제 변수 coordinates 를 볼 수 있습니다. 다음과 같은 객체가 있는지 볼 수 있습니까?

{
speed:0, // on km/h
latitude:x,
longitude:x,
accurate:x // on metters
}

브라우저에서 직접 작동하며 Capacitor를 사용하여 모바일 앱으로 빌드할 수 있습니다.

이 옵션으로 높은 정확도를 활성화할 수 있습니다.

enableHighAccuracy: true;

예

const wait = Geolocation.watchPosition(
{
enableHighAccuracy: true;
}, (position, err) => 
{
console.log('error',err);
})

귀하의 응용 프로그램에서 사용하기 매우 쉽습니다!