react-kakao-maps-sdk/esm/components/Marker.js

React components for using kakao map api

import React, { useContext, useMemo, useImperativeHandle, useLayoutEffect } from 'react';
import { useKakaoEvent } from '../hooks/useKakaoEvent.js';
import { InfoWindow } from './InfoWindow.js';
import { KakaoMapMarkerClustererContext } from './MarkerClusterer.js';
import { useKakaoMapsSetEffect } from '../hooks/useKakaoMapsSetEffect.js';
import { jsx } from 'react/jsx-runtime';

const Marker = /*#__PURE__*/React.forwardRef(function Marker(_ref, ref) {
  let {
    map,
    position,
    children,
    altitude,
    clickable,
    draggable,
    image,
    infoWindowOptions,
    onCreate,
    onClick,
    onDragEnd,
    onDragStart,
    onMouseOut,
    onMouseOver,
    opacity,
    range,
    title,
    zIndex
  } = _ref;
  const markerCluster = useContext(KakaoMapMarkerClustererContext);
  const markerImage = useMemo(() => {
    return image && new kakao.maps.MarkerImage(image.src, new kakao.maps.Size(image.size.width, image.size.height), {
      alt: image.options?.alt,
      coords: image.options?.coords,
      offset: image.options?.offset && new kakao.maps.Point(image.options?.offset.x, image.options?.offset.y),
      shape: image.options?.shape,
      spriteOrigin: image.options?.spriteOrigin && new kakao.maps.Point(image.options?.spriteOrigin.x, image.options?.spriteOrigin.y),
      spriteSize: image.options?.spriteSize && new kakao.maps.Size(image.options?.spriteSize.width, image.options?.spriteSize.height)
    });

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [JSON.stringify(image)]);
  const marker = useMemo(() => {
    const kakaoMarker = new kakao.maps.Marker({
      altitude,
      clickable,
      draggable,
      image: markerImage,
      opacity,
      range,
      title,
      zIndex,
      position
    });
    return kakaoMarker;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  useImperativeHandle(ref, () => marker, [marker]);
  useLayoutEffect(() => {
    if (markerCluster) {
      markerCluster.addMarker(marker, true);
      return () => markerCluster.removeMarker(marker, true);
    }
    marker.setMap(map);
    return () => marker.setMap(null);
  }, [map, markerCluster, marker]);
  useLayoutEffect(() => {
    if (onCreate) onCreate(marker);
  }, [marker, onCreate]);
  useKakaoMapsSetEffect(marker, "setPosition", position);
  useKakaoMapsSetEffect(marker, "setImage", markerImage);
  useKakaoMapsSetEffect(marker, "setAltitude", altitude);
  useKakaoMapsSetEffect(marker, "setClickable", clickable);
  useKakaoMapsSetEffect(marker, "setDraggable", draggable);
  useKakaoMapsSetEffect(marker, "setOpacity", opacity);
  useKakaoMapsSetEffect(marker, "setRange", range);
  useKakaoMapsSetEffect(marker, "setTitle", title);
  useKakaoMapsSetEffect(marker, "setZIndex", zIndex);
  useKakaoEvent(marker, "click", onClick);
  useKakaoEvent(marker, "dragstart", onDragStart);
  useKakaoEvent(marker, "dragend", onDragEnd);
  useKakaoEvent(marker, "mouseout", onMouseOut);
  useKakaoEvent(marker, "mouseover", onMouseOver);
  if (children) return /*#__PURE__*/jsx(InfoWindow, {
    position: position,
    map: map,
    marker: marker,
    altitude: infoWindowOptions?.altitude,
    disableAutoPan: infoWindowOptions?.disableAutoPan,
    range: infoWindowOptions?.range,
    removable: infoWindowOptions?.removable,
    zIndex: infoWindowOptions?.zIndex,
    children: children
  });
  return null;
});

export { Marker };