onMouseover 이벤트에서 받는 event 객체를 이용해 현재 마커의 위치 구하는 방법이 있을까요?

[goongoguma]

안녕하세요. 이렇게 좋은 라이브러리를 만들어 주셔서 정말 감사합니다.

현재 infowindow 기능이 지원되지않아 제가 따로 컴포넌트를 만들어준 뒤에 마우스 위치에 따라 컴포넌트를 보여주는 형식의 임시 infowindow를 만들었습니다. 하지만 onMouseover 이벤트 콜백 함수에서 받는 이벤트 객체안에서 마커의 위치를 못찾고있습니다.

 const infoWindow = (event, location) => {
    const { x, y } = event.domEvent;
    setRoomId(location.id);
    setShowInfoWindow({ x, y, display: 'block' });
  };

  const mouseOut = () => {
    setShowInfoWindow({ x: 0, y: 0, display: 'none' });
  };

  const marker = locations.map((location: IFindStayItems) => {
    const { latitude, longitude } = location.place;
    return (
      <>
        <Marker
          key={location.id}
          position={new navermaps.LatLng(latitude, longitude)}
          icon={renderMarker(location)}
          onMouseover={(event) => infoWindow(event, location)}
          title={location.place.name_kr}
        />
        {
          roomId === location.id &&
          <div style={{ position: 'absolute', left: showInfoWindow.x - 100, top: showInfoWindow.y - 170, display: showInfoWindow.display }} className="infoWindowContainer" onMouseLeave={mouseOut}>
            <InfoWindow room={location} />
          </div>
        }
      </>
    )
  });

마커 컴포넌트에서 onMouseover안에 있는 infoWindow라는 함수가 받는 event객체를 console.log 찍어보면

Object
coord: o.LatLng {y: 37.5796856, _lat: 37.5796856, x: 126.9865032, _lng: 126.9865032}
domEvent: MouseEvent {isTrusted: true, screenX: 2537, screenY: 751, stop: ƒ, pos: ƒ, …}
offset: o.Point {x: 1519.263995733345, y: -7121.669789823238}
overlay: o.Marker {OVERLAY_TYPE: "Marker", DEFAULT_OPTIONS: {…}, _wrapper: div, __targets: {…}, _nmarker_id: "nmarker-15B322CD-500C-49A5-A8C6-79E08AE910EE", …}
point: o.Point {x: 218.30151336840277, y: 99.12475492850558}
pointerEvent: MouseEvent {isTrusted: true, screenX: 2537, screenY: 751, stop: ƒ, pos: ƒ, …}

이렇게 보이는데요 mouseOver된 마커의 좌표를 객체에서 찾을수 있을까요?

[zeakd]

v0.1 에서 useRef 를 통해 Overlay Instance를 가져올 수 있도록 업데이트되었습니다.

function MyMarker() {
  const ref = useRef();

  return <Marker 
    ref={ref}
    defaultPosition={{ lat: 37.5666103, lng: 126.9783882 }}
    onMouseover={() => {
      console.log('marker', ref.current.getPosition());
    }}
  />
}