[react] 지도에서 마커를 이용한 정보 창 표시하기

22 Dec 2023

react

지도에 마커 추가하기

먼저, React에서 지도를 표시하고 마커를 추가하기 위해 react-leaflet 라이브러리를 사용할 수 있습니다. 다음은 react-leaflet을 사용하여 지도에 마커를 추가하는 예제입니다.

import React from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

function MapWithMarker() {
  const position = [51.505, -0.09];

  return (
    <MapContainer center={position} zoom={13} style={{ height: '400px' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Marker position={position}>
        <Popup>
          A pretty CSS3 popup.
          <br />
          Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
}

export default MapWithMarker;

정보 창 표시하기

마커를 클릭했을 때 정보 창을 표시하기 위해 react-leaflet의 Popup 컴포넌트를 사용하였습니다. 마커를 클릭하면 정보 창이 열리고 원하는 내용을 표시할 수 있습니다. Popup 컴포넌트 안에 원하는 내용을 입력하여 정보 창을 커스터마이징할 수 있습니다.

지도에 마커를 추가하고 해당 마커를 클릭했을 때 정보 창을 표시하는 방법에 대해 알아보았습니다. 이를 응용하여 지도 기반의 서비스나 애플리케이션을 개발하는 데 활용할 수 있습니다.