@uiw/react-amap-marker/esm/useMarker.js

点标记是用来标示某个位置点信息的一种地图要素，本章介绍如何在地图图面使用点标记。

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["visiable", "visible", "children"];
import { useState, useLayoutEffect } from 'react';
import { useVisiable, useEventProperties, useSettingProperties, usePortal } from '@uiw/react-amap-utils';
import { useMapContext } from '@uiw/react-amap-map';
export var useMarker = function useMarker(props) {
  if (props === void 0) {
    props = {};
  }
  var _props = props,
    visiable = _props.visiable,
    visible = _props.visible,
    children = _props.children,
    other = _objectWithoutPropertiesLoose(_props, _excluded);
  var _useMapContext = useMapContext(),
    map = _useMapContext.map;
  var _useState = useState(),
    marker = _useState[0],
    setMarker = _useState[1];
  var _usePortal = usePortal(),
    container = _usePortal.container,
    Portal = _usePortal.Portal;
  useLayoutEffect(() => {
    if (map && !marker) {
      if (props.children) {
        other.content = container;
      }
      var instance = new AMap.Marker(_extends({}, other));
      map.add(instance);
      setMarker(instance);
      return () => {
        if (instance) {
          // @fix [244] https://github.com/uiwjs/react-amap/issues/244
          // typeof marker.remove === 'function' && marker.remove();
          instance.setMap(null);
          setMarker(undefined);
        }
      };
    }
  }, [map]);
  useVisiable(marker, visible != null ? visible : visiable);
  useSettingProperties(marker, props, ['Path', 'Anchor', 'Offset', 'Animation', 'Clickable', 'Position', 'Angle', 'Label', 'zIndex', 'Icon', 'Draggable', 'Cursor', 'Content', 'Map', 'Title', 'Top', 'Shadow', 'Shape', 'ExtData']);
  useEventProperties(marker, props, ['onClick', 'onDblClick', 'onRightClick', 'onMouseMove', 'onMouseOver', 'onMouseOut', 'onMouseDown', 'onMouseUp', 'onDragStart', 'onDragging', 'onDragEnd', 'onMoving', 'onMoveEnd', 'onMoveAlong', 'onTouchStart', 'onTouchMove', 'onTouchEnd']);
  return {
    marker,
    setMarker,
    MarkerPortal: Portal
  };
};