NEW 앱인벤터2 강좌36. 컴포넌트 탐구 – 지도(Map)

이 글은 읽는데 약 9분이 걸립니다.

전체 강좌 목록:
http://semicolon1.kr/appinventor.html


0. 개요

지도 컴포넌트는 앱 내에서 지도를 표시할 수 있는 컴포넌트입니다.
단순히 지도를 보여주기만 하는 것이 아니라, 사용자의 액션을 이벤트로 가져와 처리하거나 지도위에 마커나 도형을 그릴 수 있는 다양한 기능을 제공합니다.

지도 컴포넌트의 경우 제 블로그에 다른 관련 글이 있으므로 아래 글들도 참고해보시기를 추천드립니다.

https://blog.naver.com/edisondl/221181975804

https://blog.naver.com/edisondl/221266330387


앱인벤터 팔레트의 지도 분류에는 지도 컴포넌트 외에도 다른 컴포넌트들이 있는데, Navigation을 제외한 것들은 모두 지도에 종속되는 컴포넌트들입니다. 마치 캔버스 컴포넌트와 그 안에 종속되는 이미지 스프라이터, 공 컴포넌트 처럼 말이죠.
그렇기 때문에 가장 기본이 되는 지도 컴포넌트를 먼저 알아보겠습니다. 

1. 형태

추가할 경우 위 사진처럼 디자이너에서 지도의 미리보기가 표시됩니다.
표시되는 기본 위치는 42.359144, -71.093612로 미국 보스턴의 어디인듯 합니다.
디자이너에서도 마우스 드래그를 이용하여 지도를 움직여볼 수 있습니다.

또한 지도의 좌측 하단에 있는 3개의 버튼은 디자이너에서만 나타나는 버튼으로, 디자이너에서의 지도의 움직임 등을 컨트롤 할 수 있습니다.
자세한 것은 글 아래 문단을 봐주세요.

2. 속성

지도(Map) 속성

속성명

설명

중심좌표(CenterFromString)

지도의 기본 중심 좌표를 지정합니다.

값은 쉼표( , )로 구분된 위도, 경도쌍으로 지정합니다.

기본값은 42.359144, -71.093612 입니다.

팬활성화여부(EnablePan)

팬(손가락을 밀어 지도를 움직이는 동작)을 허용할지 지정합니다.

회전가능여부(EnableRotation)

지도의 회전을 허용할지 지정합니다.

줌가능여부(EnableZoom)

줌(확대/축소)를 허용할지 지정합니다.

높이(Height)

지도의 높이를 지정합니다.

너비(Width)

지도의 너비를 지정합니다.

위치센서(LocationSensor)

기본 내장된 위치 제공자 대신 사용할 위치 센서를 지정합니다.

선택할 수 있는 위치 센서는 앱인벤터의 위치센서 컴포넌트입니다.

만약 지도가 있는 스크린에 위치센서 컴포넌트가 없으면 선택 목록에 아무것도 뜨지 않습니다.

지도유형(MapType)

지도의 유형을 선택합니다. 사용 가능한 종류는 다음과 같습니다:

1: 거리뷰

2: 항공뷰

3: 지형뷰

참고: 거리뷰는 OpenStreetMap에서, 항공뷰 및 지형 레이어는 US Geological Survey에서 제공합니다.

회전(Rotation)

지도의 회전 각도를 지정합니다.

크기단위(ScaleUnits)

축척에 사용되는 단위를 지정합니다. 사용가능한 단위는 다음과 같습니다:

1: 미터법

2: 야드법

나침반보이기(ShowCompass)

나침반을 표시합니다.

만약 휴대폰이 나침반을 사용할 수 있으면 나침반이 기기의 방향에 따라 회전합니다.

축척보기(ShowScale)

지도 축척을 표시합니다.

사용자보이기(ShowUser)

사용자의 현재 위치를 표시합니다.

이 기능은 사용자가 위치 서비스를 활성화 해야 쓸 수 있습니다.

줌보이기(ShowZoom)

확대/축소 버튼을 표시합니다.

보이기여부(Visible)

지도 컴포넌트의 보이기 여부를 지정합니다.

줌레벨(ZoomLevel)

확대율을 지정합니다. 확대율을 지도의 유형이나 위치에 따라 다릅니다.

예를 들어 지도의 저장 공간을 절약하기 위해 도시보다 바다에서는 최대 확대율이 낮을 수 있습니다.

3. 블록

지도(Map) 이벤트 블록

블록

설명

사용자가 지도를 이동하거나 확대/축소 또는 회전을 하여서 지도의 경계가 변경되었을 때 실행됩니다.

ㄴ 위도 [숫자]

ㄴ 경도 [숫자]

지도의 한 지점을 빠르게 두번 터치한 경우 해당 좌표를 반환하며 실행됩니다.

ㄴ 형상 [컴포넌트]

마커나 도형 등 지도 위의 형상을 클릭했을 때 클릭된 형상을 반환하며 실행됩니다.

ㄴ 형상 [컴포넌트]

마커나 도형 등 지도 위의 형상을 드래그했을 때 클릭된 형상을 반환하며 실행됩니다.

ㄴ 형상 [컴포넌트]

마커나 도형 등 지도 위의 형상을 길게 클릭했을 때 길게 클릭된 형상을 반환하며 실행됩니다.

ㄴ 형상 [컴포넌트]

마커나 도형 등 지도 위의 형상을 드래그를 시작했을 때 드래그된 형상을 반환하며 실행됩니다.

ㄴ 형상 [컴포넌트]

마커나 도형 등 지도 위의 형상을 드래그를 멈췄을 때 드래그된 형상을 반환하며 실행됩니다.

ㄴ url [텍스트]

ㄴ 형상 [리스트]

URL로 부터 형상을 가져오는데 성공했을 때 실행됩니다.

형상 매개변수는 가져온 형상을 앱인벤터에서 사용하는 형상 리스트 형식으로 변환하여 제공합니다.

ㄴ 메시지

위도 또는 경도가 잘못된 값일 때 메시지를 포함해서 실행됩니다.

범위는 위도가 [-90, 90], 경도가 [-180,180]입니다.

ㄴ url [텍스트]

ㄴ 응답코드 [숫자]

ㄴ 오류메시지 [텍스트]

URL로 부터 형상을 가져오는 데 실패한 경우 각종 오류 정보와 함께 실행됩니다.

ㄴ 위도 [숫자]

ㄴ 경도 [숫자]

지도의 한 지점을 길게 누른 경우 해당 좌표를 반환하며 실행됩니다.

지도의 초기화가 완료되어서 사용자가 사용할 수 있는 상태가 되었을 때 실행됩니다.

ㄴ 위도 [숫자]

ㄴ 경도 [숫자]

지도의 한 지점을 한번 터치한 경우 해당 좌표를 반환하며 실행됩니다.

사용자가 지도의 확대율을 변경하였을 때 실행됩니다.

지도(Map) 함수 블록

블록

설명

ㄴ 위도 [숫자]

ㄴ 경도 [숫자]

– (반환) 생성된 마커 [컴포넌트]

해당 위도, 경도에 새로운 마커를 생성합니다.

그리고 생성된 마커의 컴포넌트 객체를 반환합니다.

ㄴ 설명

– (반환) 형상 컴포넌트 [컴포넌트]

리스트로 된 형상 설명을 형상 컴포넌트로 변환하여 반환합니다.

ㄴ url [텍스트]

해당 URL에서 GeoJSON 형식의 형상을 가져옵니다.

만약 가져오는데 성공하면 [형상을 얻었을 때] 이벤트가 실행되며, 가져온 GeoJSON을 구문분석하여 리스트로 만들어 매개변수로 반환합니다.

가져오는데 실패하면 [열기 오류가 발생했을 때] 이벤트가 실행됩니다.

ㄴ 위도 [숫자]

ㄴ 경도 [숫자]

ㄴ 줌 [숫자]

지도 중심을 지정된 위도, 경도로 이동하면서 확대율 또한 조정합니다.

ㄴ 경로 [텍스트]

지도 컴포넌트 위의 형상들을 해당 경로에 GeoJSON 형식으로 저장합니다.

지도(Map) 속성 지정 블록

블록

입력형식

설명

리스트

동서남북 각 경계의 좌표를 리스트로 받아서 해당 좌표들이 경계가 되도록 지도를 이동합니다.

((북쪽위도, 서쪽경도), (남쪽위도, 동쪽경도)) 형식으로 리스트를 지정해주면 됩니다.

자세한건 아래 문단을 참고해주세요.

텍스트

지도의 중심좌표를 지정합니다.

위도, 경도 형식으로 입력합니다.

논리

지도의 이동 허용 여부를 지정합니다.

논리

지도의 회전 허용 여부를 지정합니다.

논리

지도의 확대 허용 여부를 지정합니다.

리스트

리스트로 부터 형상을 가져옵니다.

숫자

지도의 높이를 px단위로 지정합니다.

숫자

지도의 높이를 현재 스크린 높이에 대한 비율로 지정합니다.

예시로 높이 비율이 50이면 스크린 높이의 반만큼 길어집니다.

위치센서

기본 위치 제공자 대신 사용할 위치 센서 컴포넌트를 지정합니다.

숫자

지도의 유형을 선택합니다. 사용 가능한 종류는 다음과 같습니다:

1: 거리뷰

2: 항공뷰

3: 지형뷰

숫자

지도의 회전 각도를 지정합니다.

숫자

축척에 사용되는 단위를 지정합니다. 사용가능한 단위는 다음과 같습니다:

1: 미터법

2: 야드법

논리

나침반의 표시 여부를 지정합니다.

논리

축척의 표시 여부를 지정합니다.

논리

사용자의 표시 여부를 지정합니다.

논리

줌 컨트롤러의 표시 여부를 지정합니다.

논리

지도의 보이기 여부를 지정합니다.

숫자

지도의 너비를 px단위로 지정합니다.

숫자

지도의 너비를 현재 스크린 너비에 대한 비율로 지정합니다.

예시로 너비 비율이 50이면 스크린 너비의 반만큼 길어집니다.

숫자

확대율을 지정합니다. 확대율을 지도의 유형이나 위치에 따라 다릅니다.

예를 들어 지도의 저장 공간을 절약하기 위해 도시보다 바다에서는 최대 확대율이 낮을 수 있습니다.

지도(Map) 속성 블록

블록

반환형식

리스트

논리

논리

논리

리스트

숫자

숫자

숫자

숫자

숫자

숫자

논리

논리

논리

논리

숫자

숫자

논리

숫자

숫자

컴포넌트

4. 지도 컨트롤러

지도 컴포넌트의 좌측 하단에는 이렇게 3개의 버튼으로 된 컨트롤러가 있으며, 이것은 앱에서는 나타나지 않는 버튼들입니다.
각 버튼에 마우스를 올려다 놓으면 용도가 나타나는데,

지도 잠금: 지도를 마우스로 드래그 했을 때 지도가 움직이지 않도록 합니다.
지도 컴포넌트를 이동시킬 때 사용합니다.

현재 위치를 중심으로: 현재 디자이너에서 보이는 위치를 지도 속성 중 중심좌표의 값으로 지정합니다. 즉, 현재 보이는 위치를 앱 실행 시 지도의 초기 위치로 지정합니다.

복귀: 중심 좌표 속성에 입력된 위경도로 지도를 이동시킵니다.

이런 기능들입니다.

5. 지도 경계 속성 설정



위에서 간단히 이 블록에 대해서 설명을 했지만 조금 더 자세히 알아보겠습니다.

만약 지도를 이렇게 이동시키고 싶다고 하겠습니다.
사실 중심 좌표를 이용해서 이동하는것이 가장 쉽지만 이번에는 경계 설정을 사용해보겠습니다.

먼저 저 화면에서 동서남북 경계지점의 좌표를 찾습니다.

이렇게 대략적으로 좌표를 찾았습니다.
사진의 좌표는 위도, 경도형식입니다.

이제 여기서 북쪽위도, 서쪽경도, 남쪽위도, 동쪽경도만 찾으면 됩니다.
참고로 위도는 가로선, 경도는 세로선입니다.

즉, 블록은 이렇게 됩니다:

위에서 부터 북쪽위도, 서쪽경도, 남쪽위도, 동쪽경도입니다.

댓글

제목과 URL을 복사했습니다