아이오닉에서 ParseGeoPoint로 사용자 위치와 거리 계산

아이오닉 프레임워크와 함께 지리적 포인트 사용하기 소개 parse는 객체와 실제 세계의 위도 및 경도 좌표를 연결할 수 있게 해줍니다 parsegeopoint 를 parseuser ,에 추가하면 다른 사용자와 가장 가까운 사용자를 쉽게 찾고, 앱 사용자들의 위치를 보여주며, 사용자의 위치 정보를 저장하는 등 다양한 가능성을 활용할 수 있습니다 또한 parsegeopoint 를 모든 parseobject ,에 연결할 수 있습니다 예를 들어, 귀하의 앱이 물리적 제휴점이 있는 상점과 관련이 있다면, 해당 상점의 위치를 보여주거나 사용자에게 가장 가까운 상점을 보여주는 페이지를 만들 수 있습니다 이 연관 사용의 또 다른 예 귀하의 앱이 캐릭터를 나타내기 위해 parseobjects를 생성한 게임이라면, 이러한 캐릭터에 parsegeopoints를 추가하면 플레이어의 경로를 따라 표시할 수 있습니다 이 튜토리얼은 back4app을 통해 parsegeopoint의 일부 기능을 사용하는 방법을 설명합니다 이 튜토리얼을 따르면 다음과 같은 작업을 수행할 수 있습니다 전제 조건 1 google api 키 설정 설치 https //angular maps com/api docs/agm core/ $ npm install @agm/core 생성된 키를 /src/app/app module ts에 추가하여 sdk를 가져옵니다 2 사용자의 위치 가져오기 사용자의 위치를 가져오기 위해 https //ionicframework com/docs/native/geolocation/ 플러그인을 설치해야 합니다 $ ionic cordova plugin add cordova plugin geolocation variable geolocation usage description="당신의 위치를 찾기 위해" $ npm install save @ionic native/geolocation 이제 /src/app/app module ts에 geolocation을 설치하고 가져왔으므로, 위치를 가져오는 메서드를 구현하고 결과를 클래스 속성에 저장해 보겠습니다 3 지도를 표시할 페이지 만들기 이제 사용자 위치가 있으므로, 이미 언급한 \[angular google maps]를 사용하여 지도를 표시할 페이지를 만들어 보겠습니다 먼저, 헬퍼를 실행합니다 $ ionic generate page maps 이제 현재 지도가 표시하고 있는 현재 위치를 보유하는 마커와 지도 주변의 핀 포인트가 될 마커 배열을 수신하도록 만들어 보겠습니다 이제 maps html을 열고 데이터를 표시하도록 만들어 보겠습니다 4 지도에서 현재 사용자의 위치 표시하기 이제 지도 위치를 표시할 페이지가 생겼습니다 home ts로 돌아가서 지도에 사용자의 위치를 표시하는 메서드를 구현해 보겠습니다 이제 parse의 용이성을 활용하여 사용자 위치에 가장 가까운 피어를 찾아보겠습니다 얼마나 간단한지 볼 수 있습니다 기본적으로 우리가 해야 할 일은 user 컬렉션에 대한 쿼리 객체를 인스턴스화하고 near()를 호출하여 가장 가까운 지리적 위치를 찾는 것이었습니다 5 parsegeopoint를 parseobjects에 연결하기 위해 back4app 설정하기 당신이 만들고 있는 예제 앱이 물리적 제휴점이 있는 상점 그룹과 관련되어 있다고 가정해 보십시오 이 상점의 모든 물리적 제휴점을 지도에 표시하는 것은 흥미로울 것입니다 이를 위해 back4pp 대시보드에서 stores 클래스를 생성하고, 기존 상점을 parseobjects로 저장한 후, 그 위치를 저장하면 앱이 물리적 제휴점을 쿼리하고 지도에 그 위치를 표시할 수 있게 됩니다 다음 단계가 도움이 될 것입니다 https //www back4app com/ 에 로그인하고, 앱을 찾아 대시보드를 엽니다 core > browser > 클래스를 생성으로 이동합니다 아래 이미지와 같이 what type of class do you need? 필드에서 custom 옵션을 선택합니다 what should we call it? 필드에 “ stores ”를 입력한 후 create class 버튼을 클릭합니다 그러면 “ stores ”라는 새 클래스가 표시되고, 여기에 두 개의 열을 삽입해야 합니다 데이터 유형이 string인 name이라는 열과 데이터 유형이 geopoint인 location이라는 또 다른 열입니다 당신의 클래스는 다음과 같이 되어야 합니다 이제 이 클래스를 정보로 채웁니다 그렇게 하려면, 아래 이미지와 같이 오른쪽 상단 또는 페이지 중앙의 메뉴에서 add a row 버튼을 클릭합니다 그런 다음 필요한 정보로 행을 채우십시오 상점의 이름과 위도 및 경도 일부 데이터를 입력한 후, 귀하의 stores 클래스는 아래 이미지를 따라야 합니다 더 많은 데이터를 입력하려면 상단의 행 추가 버튼을 클릭하거나 마지막 데이터 행 아래의 + 버튼을 클릭할 수 있습니다 이제 귀하의 앱에서 상점의 위치 정보를 사용할 준비가 되었습니다 6 모든 상점 위치를 지도에 표시하기 이제 상점 위치가 저장되었으므로, 객체를 가져오고 표시하는 메서드를 코딩해 보겠습니다 쉽죠? 이제 가장 가까운 것을 가져와 보겠습니다 이전과 같이 가장 가까운 사용자를 가져오는 것과 같다는 것을 알 수 있습니다 7 홈 페이지에 버튼 추가하기 아마도 우리는 이러한 메서드를 호출할 방법이 없다는 것을 눈치챘을 것입니다 그러니 home ts에 버튼을 추가하고 실행해 보겠습니다! 8 앱 테스트하기 https //www back4app com/ 에 로그인하십시오 앱을 찾고 대시보드 > 코어 > 브라우저 > 사용자로 이동하여 위치와 연결된 사용자를 생성하여 getclosestuser 메서드가 작동하도록 하십시오 실제 장치나 브라우저에서 앱을 실행하여 가입하고 로그인하십시오 모든 기능을 시도해 보세요! 완료되었습니다! 이 단계에서 back4app을 통해 parsegeopoint의 일부 기능을 사용할 수 있습니다!