[react] 리액트 네이티브로 다중 지점 마커 표시하기

22 Dec 2023

react

리액트 네이티브로 지도 애플리케이션을 개발할 때, 지도에 다중 마커를 표시하는 것은 일반적인 요구 사항입니다. 사용자에게 여러 장소를 시각적으로 보여주는 것은 매우 유용하며, 리액트 네이티브에서도 간단하게 구현할 수 있습니다.

구현 방법

우리의 목표는 리액트 네이티브 지도에 여러 지점의 마커를 추가하는 것입니다. 이를 위해서는 react-native-maps 패키지를 사용하여 구글 맵을 통합하고, 이 패키지를 이용해 다중 마커를 표시할 수 있습니다.

import React from 'react';
import MapView, { Marker } from 'react-native-maps';

const markers = [
  { id: 1, title: '마커 1', coordinates: { latitude: 37.78825, longitude: -122.4324 } },
  { id: 2, title: '마커 2', coordinates: { latitude: 37.75825, longitude: -122.4624 } },
  // 추가적인 마커들...
];

export default function App() {
  return (
    <MapView
      style={{ flex: 1 }}
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    >
      {markers.map(marker => (
        <Marker
          key={marker.id}
          coordinate={marker.coordinates}
          title={marker.title}
        />
      ))}
    </MapView>
  );
}

위의 예제에서, react-native-maps의 Marker 컴포넌트를 이용하여 MapView 안에 markers 배열을 반복하며 각 마커를 표시합니다.

결론

리액트 네이티브에서 다중 지점 마커를 표시하는 것은 사용자에게 중요한 정보를 시각적으로 제공하는 좋은 방법입니다. react-native-maps 패키지의 Marker를 이용하여 간단하게 다중 마커를 추가할 수 있습니다. 다양한 옵션과 스타일을 사용하여 지도에 마커를 표시하는 방법을 탐구하고 사용자에게 최적의 경험을 제공하기 위해 노력해보세요.

참고 자료:

React Native Maps 공식 문서