Naver Map컴포넌트
NaverMapCircleOverlay
원형 영역을 표시하는 오버레이 컴포넌트
NaverMapCircleOverlay
지도 위의 특정 좌표를 중심으로 반경을 가진 원을 표시합니다. 반경은 미터(m) 단위로 지정합니다.
임포트
import { NaverMapCircleOverlay } from '@boostbrothers/react-native-naver-map';
기본 사용법
<NaverMapView style={{ flex: 1 }} initialCamera={{ latitude: 37.5666102, longitude: 126.9783881, zoom: 14 }}><NaverMapCircleOverlaylatitude={37.5666102}longitude={126.9783881}radius={500}color="rgba(0, 100, 255, 0.3)"outlineWidth={2}outlineColor="#0066FF"/></NaverMapView>
Props
위치 (필수)
| Prop | 타입 | 설명 |
|---|---|---|
latitude | number | 중심 위도 (필수) |
longitude | number | 중심 경도 (필수) |
기본 오버레이 Props (BaseOverlayProps)
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
zIndex | number | 0 | 보조 Z 인덱스 |
globalZIndex | number | -200000 | 전역 Z 인덱스 |
isHidden | boolean | - | 숨김 여부 |
minZoom | number | 0 | 표시 최소 줌 레벨 |
maxZoom | number | 21 | 표시 최대 줌 레벨 |
isMinZoomInclusive | boolean | - | 최소 줌 포함 여부 |
isMaxZoomInclusive | boolean | - | 최대 줌 포함 여부 |
onTap | () => void | - | 탭 이벤트 |
원 Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
radius | number | 0 | 반경 (미터 단위) |
color | ColorValue | 'black' | 채우기 색상 |
outlineWidth | number | 0 | 외곽선 두께 dp(Android), pt(iOS) |
outlineColor | ColorValue | 'black' | 외곽선 색상 |
사용 예제
반경 표시
// 현재 위치 기준 1km 반경<NaverMapCircleOverlaylatitude={userLatitude}longitude={userLongitude}radius={1000}color="rgba(0, 128, 255, 0.15)"outlineWidth={2}outlineColor="rgba(0, 128, 255, 0.8)"/>
여러 원 동시 표시
const hospitals = [{ id: '1', lat: 37.5666102, lng: 126.9783881, radius: 300 },{ id: '2', lat: 37.5700, lng: 126.9820, radius: 500 },];<NaverMapView style={{ flex: 1 }} initialCamera={{ latitude: 37.568, longitude: 126.98, zoom: 13 }}>{hospitals.map((hospital) => (<NaverMapCircleOverlaykey={hospital.id}latitude={hospital.lat}longitude={hospital.lng}radius={hospital.radius}color="rgba(255, 0, 0, 0.15)"outlineWidth={1}outlineColor="#FF0000"onTap={() => console.log(`병원 ${hospital.id} 탭`)}/>))}</NaverMapView>
위치 추적 영역 표시
<NaverMapCircleOverlaylatitude={currentLat}longitude={currentLng}radius={accuracyMeters}color="rgba(66, 133, 244, 0.15)"outlineWidth={1}outlineColor="rgba(66, 133, 244, 0.5)"/>