REACT_leaflet 마커 찍고 팝업 띄우기

전에 지도를 잘 뿌려줬다면 오늘은 마커를 집어넣어보자.

일단 import에서 Marker를 추가한다.

import {MapContainer, Marker, TileLayer} from "react-leaflet";

그냥 JSX부분에

<MapContainer>
   <TileLayer/>
   <Marker position={[위도,경도]}/>
</MapContainer>

이런식으로만 써도 잘 나옴...

근데 여기에 마우스 가져대면 팝업이 뜨게 해보자.
클릭할때가 아니라 그냥 마우스포인터 올려놓으면 뜨게 할꺼임.

import 에 Popup 도 추가하자.

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

그다음 eventhandlers라는 함수를 하나 만들어보자.
useMemo와 useRef도 쓸꺼임(import React,{useMemo,useRef})추가 하자.

그다음 아래 코드를 추가해준다.

const eventHandlers=useMemo(()=>({
        mouseover(){
            console.log("on")
            if (markerRef) markerRef.current.openPopup();
        },
        mouseout(){
            console.log("off")
            if (markerRef) markerRef.current.closePopup();
        }
    }),[])

마우스 올려놓으면 console에 on이라고 찍히고 빼면 off찍힘.
그리고 markerRef의 Popup창을 열고 닫아준다.

간.단.

그리고 JSX의 Marker부분을 이렇게 수정해주면 됨.

<Marker 
   position={[위도,경도]} 
   eventHandlers={eventHandlers} 
   ref={markerRef}
>
   <Popup>팝업에 띄우고싶은 내용</Popup>
</Marker>

끝