CapDriveMap
미터 내에 지도, 위치 및 경로를 표시합니다. 경로 지점을 제공하기 위해 path을 사용하여 카메라 중심, 방향, 확대/축소 및 지도 스타일을 설정할 수 있습니다. 사용자의 위치를 추적하려면 유효한 위치 데이터가 필요합니다.
예제
function main() {
return (
<Map
center="userLocation"
heading="northUp"
mapStyle="standard"
appearance="automatic"
showUserLocation={true}
cameraAnimation={true}
regionOffset={{ x: 0, y: 20 }}
/>
);
}
사용법
- center는 카메라, path는 별도 경로입니다. 중심 지정만으로 경로가 생기지 않습니다. null은 구간을 끊습니다. 카메라는 cameraAnimation, 경로 색은 Gradient가 아닌 Color입니다. 위치가 없으면 데이터나 고정 좌표를 확인하세요.
- 공간 배치 후 x/y와 transform을 적용합니다. 자식을 옮겨도 형제는 밀리지 않습니다. 간격은 spacing 또는 Spacer, 완성된 View의 회전·확대는 transform을 사용하세요.
속성
center?"userLocation" | "dataLocation" | MapCoordinate카메라 중심: 기기 위치, 계기의 현재 위치 데이터 또는 고정 좌표입니다. 기본값은 userLocation입니다.
"userLocation"showUserLocation?boolean위치를 사용할 수 있을 때 기본 사용자 위치 표시를 보여 줍니다.
truepath?ReadonlyArray<MapCoordinate | null>순서대로 된 경로 좌표입니다. null은 구간을 나눕니다. 위도/경도를 사용하며 빈 배열은 경로를 그리지 않습니다.
[]pathStyle?MapPathStyle네이티브 경로 스타일: Color, 두께, 끝, 연결, 점선, 외곽선 및 선택적 시작·끝 마커입니다. 그라디언트는 지원하지 않습니다.
{stroke: $env.accent, lineWidth: 4, outlineStroke: $env.foreground, outlineWidth: 1}heading?"northUp" | "vehicle" | "path" | number카메라 방향: northUp, vehicle, path 또는 360으로 정규화한 각도입니다. 경로 방향은 구간 단절을 따릅니다.
"northUp"regionOffset?ViewPoint화면 포인트 단위 영역 오프셋입니다. 양수 x/y는 영역을 오른쪽/아래로, 지도 내용을 왼쪽/위로 이동합니다.
{x: 0, y: 0}pitch?number카메라 기울기(도)입니다. 0은 수직으로 내려다봅니다.
0mapStyle?"standard" | "satellite" | "hybrid"standard는 도로, satellite는 위성, hybrid는 위성에 라벨을 더합니다.
"standard"appearance?"automatic" | "light" | "dark"automatic은 환경을 따르며 light/dark로 고정할 수 있습니다.
"automatic"cameraAnimation?boolean네이티브 카메라 전환을 애니메이션으로 표시합니다. 기본 켜짐이며 첫 화면과 동작 줄이기에서는 꺼집니다.
true공통 속성
width?number | "auto" | "fill"너비: 포인트, 자동 크기 또는 부모 영역 채우기.
"fill"height?number | "auto" | "fill"높이: 포인트, 자동 크기 또는 부모 영역 채우기.
"fill"x?number시각적 이동량(포인트): x는 오른쪽, y는 아래쪽이며 레이아웃 공간은 바뀌지 않습니다.
0y?number시각적 이동량(포인트): x는 오른쪽, y는 아래쪽이며 레이아웃 공간은 바뀌지 않습니다.
0transform?ViewTransform레이아웃을 바꾸지 않는 전체 변환입니다. 이동은 포인트, 회전·기울기는 도, 배율 1은 원래 크기, 기준점은 0–1입니다.
{rotation: 0}opacity?number전체 View 불투명도: 0은 투명, 1은 불투명입니다.
1cornerRadius?number모서리 반경(포인트)입니다.
0clipped?booleanView 경계를 벗어난 내용을 자릅니다.
falseclip?"rectangle" | "ellipse"자르기 모양은 rectangle 또는 ellipse입니다. Material은 false로 해제할 수 있습니다.
"rectangle"zIndex?number형제 View의 그리기 순서입니다. 큰 값이 앞에 표시됩니다.
0animations?MapAnimation[]속성 변경 애니메이션입니다. duration/delay는 초, from/to는 끝값, repeat/autoreverse는 반복, wrap은 주기입니다.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | number형제 요소 사이의 안정적인 식별자.
조합 예제
function main() {
return (
<Map
width={260}
height={180}
center={{ latitude: 31.2304, longitude: 121.4737 }}
heading="northUp"
showUserLocation={false}
cameraAnimation={false}
path={[
{ latitude: 31.2304, longitude: 121.4737 },
{ latitude: 31.232, longitude: 121.476 },
null,
{ latitude: 31.235, longitude: 121.48 },
{ latitude: 31.237, longitude: 121.482 },
]}
pathStyle={{
stroke: $env.accent,
lineWidth: 4,
outlineStroke: 'white',
outlineWidth: 1,
showEndpoints: true,
}}
/>
);
}
애니메이션
widthheightxyopacitycornerRadiustransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYregionOffset.xregionOffset.ypathStyle.lineWidthpathStyle.outlineWidthpathStyle.dashPhasepathStyle.strokepathStyle.outlineStroke생략 시 동작
표는 구현에서 확인한 생략 동작이며 속성 예제는 기본값이 아닙니다. 고정 결과에는 명시적으로 값을 주고 환경 크기·테마 색을 상수로 보지 마세요.
| 속성 | 생략 시 동작 |
|---|---|
center | "userLocation" |
heading | "northUp" |
cameraAnimation | true |
mapStyle | "standard" |
appearance | "automatic" |
showUserLocation | true |
pitch | 0 |