[React Native] react native maps

카테고리 : Development
태그: development · reactnative
등록일: 2023년 05월 12일
최근 업데이트: 2023년 05월 12일

---

• 1. <MapView /> Component API
  • 🚗 Props
  • 🚗Events
  • 🚗 Methods
  • 🚗 Types

• this ordered seed list will be replaced by the toc

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	boolean - 지도를 확대 / 축소하여 지정된 마커가 모두 보이도록 설정합니다. Array로 전달된 마커 ID의 목록을 표시하거나 boolean 값 true를 사용하여 모든 마커가 보이도록 설정합니다.
	fitToCoordinates	coordinates: Array, options: { edgePadding: EdgePadding, animated: Boolean }	fitToCoordinates?: Array - 지도를 확대 / 축소하여 모든 지정된 지리 좌표가 보이도록 설정합니다. 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,
}