전체 강좌 목록:
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이면 스크린 너비의 반만큼 길어집니다. | |
숫자 | 확대율을 지정합니다. 확대율을 지도의 유형이나 위치에 따라 다릅니다. 예를 들어 지도의 저장 공간을 절약하기 위해 도시보다 바다에서는 최대 확대율이 낮을 수 있습니다. |
4. 지도 컨트롤러

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

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

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

복귀: 중심 좌표 속성에 입력된 위경도로 지도를 이동시킵니다.
이런 기능들입니다.
5. 지도 경계 속성 설정
위에서 간단히 이 블록에 대해서 설명을 했지만 조금 더 자세히 알아보겠습니다.

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

이렇게 대략적으로 좌표를 찾았습니다.
사진의 좌표는 위도, 경도형식입니다.
이제 여기서 북쪽위도, 서쪽경도, 남쪽위도, 동쪽경도만 찾으면 됩니다.
참고로 위도는 가로선, 경도는 세로선입니다.
즉, 블록은 이렇게 됩니다:

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