@uiw/react-amap-map/esm/useMap.js

基于 React 封装的高德地图组件。AMap Component Based On React.

import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
import _extends from "@babel/runtime/helpers/extends";
import { useState, useMemo, useEffect, useContext } from 'react';
import { useSetStatus, useEventProperties, useSettingProperties } from '@uiw/react-amap-utils';
import { Context } from './context';

/**
 * 此类型是 `<Map>` 组件传递给子组件(如 `<Marker>`)的两个 props
 */

export var useMap = function useMap(props) {
  if (props === void 0) {
    props = {};
  }
  var other = _extends({}, (_objectDestructuringEmpty(props), props));
  var [map, setMap] = useState();
  var [zoom, setZoom] = useState(props.zoom || 15);
  var [container, setContainer] = useState(props.container);
  var {
    dispatch
  } = useContext(Context);
  useEffect(() => {
    if (container && !map && AMap) {
      container.className = container.className + ' react-amap-wapper';
      var instance = new AMap.Map(container, _extends({
        zoom
      }, other));
      setMap(instance);
    }
    return () => {
      if (map) {
        map.clearInfoWindow();
        map.clearLimitBounds();
        map.clearMap();
        map.destroy();
        setMap(undefined);
      }
    };
  }, [container, map]);
  useEffect(() => {
    if (map && container) {
      dispatch({
        map,
        container,
        AMap
      });
    }
    return () => {
      dispatch({
        map: undefined,
        container: undefined,
        AMap: undefined
      });
    };
  }, [map, container]);
  useMemo(() => {
    if (map && typeof props.zoom === 'number' && zoom !== props.zoom && props.zoom >= 2 && props.zoom <= 20) {
      setZoom(props.zoom);
      map.setZoom(props.zoom);
    }
  }, [zoom, props.zoom]);
  useMemo(() => {
    if (props.center && map) {
      map.setCenter(props.center);
    }
  }, [map, props.center]);
  useSetStatus(map, props, ['dragEnable', 'zoomEnable', 'jogEnable', 'pitchEnable', 'rotateEnable', 'animateEnable', 'keyboardEnable']);
  // setStatus, setZoomAndCenter, setFitView
  // 'Center',
  useSettingProperties(map, props, ['Zoom', 'LabelzIndex', 'Layers', 'City', 'Bounds', 'LimitBounds', 'Lang', 'Rotation', 'DefaultCursor', 'MapStyle', 'Features', 'DefaultLayer', 'Pitch']);
  useEventProperties(map, props, ['onMouseMove', 'onZoomChange', 'onMapMove', 'onMouseWheel', 'onZoomStart', 'onMouseOver', 'onMouseOut', 'onDblClick', 'onClick', 'onZoomEnd', 'onMoveEnd', 'onMouseUp', 'onMouseDown', 'onRightClick', 'onMoveStart', 'onDragStart', 'onDragging', 'onDragEnd', 'onHotspotOut', 'onHotspotOver', 'onTouchStart', 'onComplete', 'onHotspotClick', 'onTouchMove', 'onTouchEnd', 'onResize']);
  return {
    map,
    setMap,
    zoom,
    setZoom,
    container,
    setContainer
  };
};