react native maps
react native maps
1. <MapView /> Component API
🚗 Props
| Prop | Type | Default | Note | | ------------------------------- | ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | provider | string | | 맵 공급자를 설정합니다. 기본값은 Google Maps이며, google 또는 apple로 설정할 수 있습니다. | | region | Region | | 초기 지역을 설정 | | initialRegion | Region | | region과 동일합니다. region이 설정되면 무시됩니다. | | camera | Camera | | 초기 카메라 위치와 줌 레벨을 설정합니다. | | initialCamera | Camera | | camera와 동일합니다. camera가 설정되면 무시됩니다. | | mapPadding | EdgePadding | | 맵 패딩 값을 설정 | | paddingAdjustmentBehavior | 'always' | 'automatic' | 'never' | 'never' | paddingAdjustmentBehavior 속성은 지도를 래핑하는 컨테이너의 패딩 조정 방법을 설정하는 데 사용됩니다. 이 속성은 iOS 기기에서만 지원 | | liteMode | Boolean | false | 맵 라이트 모드를 사용할지 여부를 설정 | | mapType | String | "standard" | 맵 타입을 설정합니다. standard, satellite, hybrid 중 하나를 사용 | | customMapStyle | Array | | 맵의 사용자 정의 스타일을 설정합니다. | | userInterfaceStyle | 'light' | 'dark' | | iOS 기기에서 지도의 테마를 설정하는 데 사용. | | showsUserLocation | Boolean | false | 사용자 위치를 보여줄지 여부를 설정 NOTE: You need runtime location permissions prior to setting this to true, otherwise it is going to fail silently! Checkout the excellent https://github.com/zoontek/react-native-permissions for this. | | userLocationPriority | 'balanced' | 'high' | 'low' | 'passive' | 'high' | 사용자 위치 업데이트의 우선순위를 설정하는 데 사용됩니다. 이 속성은 showsUserLocation 속성이 true로 설정되어 있을 때만 유효 See Google APIs documentation. Note: Android only. | | userLocationUpdateInterval | Number | 5000 | mapView 컴포넌트가 사용자의 위치를 주기적으로 갱신하는 간격을 설정하는 데 사용됩니다. 이 속성은 showsUserLocation 속성이 true로 설정되어 있을 때만 유효 See Google APIs documentation. Note: Android only. | | userLocationFastestInterval | Number | 5000 | 사용자의 위치를 갱신하는 최소 간격을 설정. See https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html. Note: Android only. | | userLocationAnnotationTitle | String | | 사용자 위치 마커 제목을 설정. Note: iOS only. | | followsUserLocation | Boolean | false | 맵 뷰를 사용자의 현재 위치를 중심으로 자동으로 이동시키도록 설정하는 데 사용 Note: Apple Maps only. | | userLocationCalloutEnabled | Boolean | false | 사용자의 위치를 표시하는 마커에 대한 콜아웃(말풍선) 기능을 활성화 또는 비활성화하는 데 사용 Note: Apple Maps only. | | showsMyLocationButton | Boolean | true | 나의 위치 버튼을 보여줄지 여부를 설정 | | showsPointsOfInterest | Boolean | true | 관심 지점을 보여줄지 여부를 설정 | | showsCompass | Boolean | true | 나침반을 보여줄지 여부를 설정 | | showsScale | Boolean | true | 맵 스케일을 보여줄지 여부를 설정. Note: Apple Maps only. | | showsBuildings | Boolean | true | 건물을 보여줄지 여부를 설정 | | showsTraffic | Boolean | false | 교통 정보를 보여줄지 여부를 설정 | | showsIndoors | Boolean | true | 실내 지도를 보여줄지 여부를 설정 | | showsIndoorLevelPicker | Boolean | false | 실내 지도 레벨 선택기를 보여줄지 여부를 설정 (either Android or iOS with PROVIDER_GOOGLE). | | zoomEnabled | Boolean | true | 맵 줌을 허용할지 여부를 설정 | | zoomTapEnabled | Boolean | true | zoomTapEnabled 속성은 더블 탭(double-tap) 제스처를 사용하여 지도를 확대하는 기능을 활성화 또는 비활성화하는 데 사용 | | zoomControlEnabled | Boolean | true | zoomControlEnabled 속성은 안드로이드 기기에서 화면에 표시되는 줌 컨트롤러의 활성화 여부를 설정하는 데 사용 | | minZoomLevel | Number | 0 | minZoomLevel 속성은 지도가 표시하는 최소 줌 레벨을 설정하는 데 사용됌. | | maxZoomLevel | Number | 20 | maxZoomLevel 속성은 지도가 표시하는 최대 줌 레벨을 설정하는 데 사용됌. | | rotateEnabled | Boolean | true | 맵 회전을 허용할지 여부를 설정 | | scrollEnabled | Boolean | true | 맵 스크롤을 허용할지 여부를 설정 | | scrollDuringRotateOrZoomEnabled | Boolean | true | 맵 피치 제스처를 허용할지 여부를 설정 | | pitchEnabled | Boolean | true | pitchEnabled 속성은 지도를 기울이는(pitching) 기능을 활성화 또는 비활성화하는 데 사용 | | toolbarEnabled | Boolean | true | Android only If false 맵 툴바를 표시할지 여부를 설정, make sure to https://github.com/react-native-maps/react-native-maps/issues/4403#issuecomment-1219856534 | | cacheEnabled | Boolean | false | 맵 타일 캐싱을 허용할지 여부를 설정 | | loadingEnabled | Boolean | false | 맵 로딩 중인지 여부를 설정 | | loadingIndicatorColor | Color | #606060 | 맵 로딩 중 배경색을 설정, default to #606060. | | loadingBackgroundColor | Color | #FFFFFF | 맵 로딩 중 인디케이터 색상을 설정, default to #FFFFFF. | | tintColor | color | null | tintColor 속성은 iOS 기기에서 지도의 틴트(tint) 색상을 설정하는 데 사용 | | moveOnMarkerPress | Boolean | true | 마커를 눌렀을 때 맵을 이동할지 여부를 설정 | | legalLabelInsets | EdgeInsets | | 맵 레이블에서 벗어날 여백을 설정 | | kmlSrc | string | | kmlSrc 속성은 KML(Keyhole Markup Language) 파일의 URL을 설정하는 데 사용 | | compassOffset | Point | | compassOffset 속성은 안드로이드 기기에서 나침반(compass) 모양의 아이콘의 위치를 조정하는 데 사용 | | isAccessibilityElement | Boolean | false | isAccessibilityElement 속성은 지도가 접근성(accessibility) 요소로 인식되도록 설정하는 데 사용 |
🚗Events
To access event data, you will need to use e.nativeEvent. For example, onPress={e => console.log(e.nativeEvent)} will log the entire event object to your console.
| Event Name | Returns | Notes |
| ----------------------- | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| onMapReady | | onMapReady 속성은 지도가 렌더링되고 준비된 후에 호출되는 콜백 함수를 지정하는 데 사용 |
| onKmlReady | KmlContainer | KML 레이어가 준비되었을 때 실행할 함수를 설정 |
| onRegionChange | (Region, {isGesture: boolean}) | 지역 변경 이벤트가 발생할 때 실행할 함수를 설정합니다. |
| onRegionChangeComplete | (Region, {isGesture: boolean}) | 지역 변경이 완료될 때 실행할 함수를 설정합니다. |
| onUserLocationChange | { coordinate: Location } | 사용자 위치가 변경될 때 실행할 함수를 설정 |
| onPress | { coordinate: LatLng, position: Point } | 맵이 눌렸을 때 실행할 함수를 설정 |
| onDoublePress | { coordinate: LatLng, position: Point } | onDoublePress 속성은 사용자가 지도를 더블 탭(double tap)하는 이벤트를 처리하는 콜백 함수를 지정하는 데 사용 |
| onPanDrag | { coordinate: LatLng, position: Point } | onPanDrag 속성은 사용자가 지도를 드래그하거나 터치하고 있을 때 지도의 중심 좌표를 계속 업데이트하는 콜백 함수를 지정하는 데 사용 |
| onPoiClick | { coordinate: LatLng, position: Point, placeId: string, name: string } | onPoiClick 속성은 사용자가 지도 위의 POI(Point of Interest)를 클릭할 때 호출되는 콜백 함수를 지정하는 데 사용 |
| onLongPress | { coordinate: LatLng, position: Point } | 맵이 길게 눌렸을 때 실행할 함수를 설정 |
| onMarkerPress | | 마커가 눌렸을 때 실행할 함수를 설정 |
| onMarkerSelect | | 마커가 선택될 때 실행할 함수를 설정 |
| onMarkerDeselect | | 마커 선택이 해제될 때 실행할 함수를 설정 |
| onCalloutPress | | 마커 콜아웃이 눌렸을 때 실행할 함수를 설정 |
| onMarkerDragStart | { coordinate: LatLng, position: Point } | onMarkerDragStart 속성은 사용자가 마커를 드래그할 때 호출되는 콜백 함수를 지정하는 데 사용 |
| onMarkerDrag | { coordinate: LatLng, position: Point } | onMarkerDrag 속성은 마커를 드래그하면 호출되는 콜백 함수를 지정하는 데 사용 |
| onMarkerDragEnd | { coordinate: LatLng, position: Point } | onMarkerDragEnd 속성은 사용자가 마커 드래그를 완료하고 마커를 놓을 때 호출되는 콜백 함수를 지정하는 데 사용 |
| onIndoorLevelActivated | IndoorLevel | onIndoorLevelActivated 속성은 사용자가 지도의 실내 레벨을 변경할 때 호출되는 콜백 함수를 지정하는 데 사용 |
| onIndoorBuildingFocused | IndoorBuilding | onIndoorBuildingFocused 속성은 사용자가 실내 건물을 클릭하여 포커스를 맞출 때 호출되는 콜백 함수를 지정하는 데 사용 |
🚗 Methods
| Method Name | Arguments | Notes |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------- |
| getCamera | | getCamera 속성은 현재 지도 뷰의 카메라 정보를 가져오는 메서드. |
| getCamera 메서드는 Promise 객체를 반환하며, 이 Promise는 카메라 정보를 담은 객체를 resolve합니다. 카메라 정보 객체에는 현재 지도 뷰의 중심 좌표, 줌 레벨, 기울기, 방향 등이 포함 |
| animateCamera | camera: Camera, { duration: Number } | animateCamera 속성은 지도 뷰의 카메라를 부드럽게 애니메이션하여 이동시키는 메서드 |
| setCamera | camera: Camera, { duration: Number } | setCamera 속성은 지도 뷰의 카메라를 즉시 변경합니다. |
setCamera 메서드는 다음과 같은 파라미터를 받습니다:
camera: 변경할 카메라 정보를 담은 객체
변경할 카메라 정보 객체에는 변경할 지도 뷰의 중심 좌표, 줌 레벨, 기울기, 방향 등이 포함 |
| animateToRegion | region: Region, duration: Number | animateToRegion 속성은 현재 지도 뷰의 카메라를 부드럽게 애니메이션하여 지정한 지역을 보여주는 메서드입니다.
animateToRegion 메서드는 다음과 같은 파라미터를 받습니다:
region: 지도 뷰가 이동할 지역을 나타내는 객체
duration: 애니메이션 진행 시간을 나타내는 숫자 (밀리초)
변경할 지역 정보 객체에는 변경할 지도 뷰의 중심 좌표, 가로/세로 방향 거리, 줌 레벨 등이 포함됩니다. |
| getMapBoundaries | | Promise<{northEast: LatLng, southWest: LatLng}> |
| setMapBoundaries | northEast: LatLng, southWest: LatLng | setMapBoundaries 속성은 지도 뷰의 경계를 설정하여, 이를 벗어난 지역으로 이동하지 못하도록 하는 메서드 |
| setIndoorActiveLevelIndex | levelIndex: Number | setIndoorActiveLevelIndex 속성은 지도 뷰에 표시되는 실내 지도의 활성 레벨을 변경 |
| fitToElements | options: { edgePadding: EdgePadding, animated: Boolean } | fitToElements 속성은 주어진 마커, 경로, 모양, 영역 또는 실내 지도의 모든 엘리먼트가 모두 보이도록 지도를 확대하거나 축소합니다.
fitToElements 메서드는 다음과 같은 파라미터를 받습니다:
edgePadding: 지도 가장자리와 엘리먼트 간의 패딩을 나타내는 객체입니다. 왼쪽, 오른쪽, 위쪽 및 아래쪽 가장자리를 포함하는 상자의 크기를 나타내는 top, right, bottom, left 속성을 가집니다. 이 값을 설정하지 않으면 기본값인 { top: 0, right: 0, bottom: 0, left: 0 }이 사용됩니다.
animated: 애니메이션 여부를 나타내는 부울 값입니다. 이 값이 true이면 지도가 부드럽게 확대 또는 축소되며, false이면 즉시 확대 또는 축소됩니다. 기본값은 true입니다.
duration: 애니메이션 지속 시간을 나타내는 숫자입니다. animated 값이 true일 때만 사용됩니다. 기본값은 500입니다.
region: 지도가 보여줄 지역을 지정하는 객체입니다. 이 값이 지정되면 엘리먼트가 포함된 지역이 아닌 이 지역으로 확대 또는 축소됩니다. |
| fitToSuppliedMarkers | markerIDs: String[], options: { edgePadding: EdgePadding, animated: Boolean } | fitToSuppliedMarkers?: Array<string> | boolean - 지도를 확대 / 축소하여 지정된 마커가 모두 보이도록 설정합니다. Array로 전달된 마커 ID의 목록을 표시하거나 boolean 값 true를 사용하여 모든 마커가 보이도록 설정합니다. |
| fitToCoordinates | coordinates: Array<LatLng>, options: { edgePadding: EdgePadding, animated: Boolean } | fitToCoordinates?: Array<LatLng> - 지도를 확대 / 축소하여 모든 지정된 지리 좌표가 보이도록 설정합니다. Array로 전달된 LatLng 객체의 목록을 사용합니다.
options?: { edgePadding?: EdgePadding, animated?: boolean } - 지도 확대 / 축소에 대한 옵션을 설정합니다. edgePadding 속성은 지도 경계와 화면 경계 간의 여백을 나타내는 EdgePadding 객체입니다. animated 속성은 지도 확대 / 축소가 애니메이션으로 진행되어야 하는지 여부를 설정합니다. animated 값이 생략되면 기본값은 true입니다. |
| addressForCoordinate | coordinate: LatLng | addressForCoordinate는 MapView에서 특정 위치의 주소를 검색하는 데 사용됌.
속성값
addressForCoordinate?: (coordinate: LatLng) => void - 주소를 검색할 좌표를 나타내는 LatLng 객체를 인수로 사용하는 콜백 함수입니다. |
| pointForCoordinate | coordinate: LatLng | pointForCoordinate?: (coordinate: LatLng) => void - 화면 좌표를 검색할 좌표를 나타내는 LatLng 객체를 인수로 사용하는 콜백 함수입니다. |
| coordinateForPoint | point: Point | coordinateForPoint?: (point: Point) => void - 검색할 화면 좌표를 나타내는 Point 객체를 인수로 사용하는 콜백 함수입니다. |
| getMarkersFrames | onlyVisible: Boolean | getMarkersFrames?: () => void - 지도에 표시되는 모든 마커의 프레임 정보를 검색하는 콜백 함수입니다. |
🚗 Types
type Region {
latitude: Number,
longitude: Number,
latitudeDelta: Number,
longitudeDelta: Number,
}
type Camera = {
center: {
latitude: number;
longitude: number;
};
pitch: number;
heading: number;
// Only on iOS MapKit, in meters. The property is ignored by Google Maps.
altitude: number;
// Only when using Google Maps.
zoom: number;
};위도(latitude)와 경도(longitude)는 자명한 것이지만, 위도차(latitudeDelta)와 경도차(longitudeDelta)는 그렇지 않을 수 있습니다. developer.apple.com 웹사이트에서는 "latitudeDelta" 속성이 다음과 같이 설명됩니다.
지도에 표시할 남북 거리(도 단위)의 양입니다. 경도 거리는 위도에 따라 달라지지만, 위도 1도는 항상 약 111킬로미터(69마일)입니다.
만약 이것이 충분하지 않다면, **stackoverflow**에서 시각적인 설명을 찾을 수 있습니다.
카메라(Camera)를 사용할 때, iOS의 MapKit와 Google Maps는 높이(height)를 지정하는 방법이 다릅니다. 이를 해결하기 위해서는 크로스 플랫폼 앱에서 줌 레벨(zoom level)과 고도(altitude)를 모두 따로 지정해야합니다.
type LatLng {
latitude: Number,
longitude: Number,
}
type Location {
latitude: Number,
longitude: Number,
altitude: Number,
timestamp: Number, //Milliseconds since Unix epoch
accuracy: Number,
altitudeAccuracy: Number,
speed: Number,
}
type Point {
x: Number,
y: Number,
}
type Frame {
x: Number,
y: Number,
width: Number,
height: Number,
}
enum MapType : String {
"standard",
"satellite",
"hybrid",
"terrain" //Android only
}
type EdgePadding {
top: Number,
right: Number,
bottom: Number,
left: Number
}
type EdgeInsets {
top: Number,
left: Number,
bottom: Number,
right: Number
}
type Marker {
id: String,
coordinate: LatLng,
title: String,
description: String
}
type KmlContainer {
markers: [Marker]
}
type IndoorBuilding {
underground: boolean,
activeLevelIndex: Number,
levels: Array<IndoorLevel>,
}
type IndoorLevel {
index: Number,
name: String,
shortName: String,
}
type Address {
name: String,
thoroughfare: String,
subThoroughfare: String,
locality: String,
subLocality: String,
administrativeArea: String,
subAdministrativeArea: String,
postalCode: String,
countryCode: String,
country: String,
}