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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useMap = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = require("react");
var _reactAmapUtils = require("@uiw/react-amap-utils");
var _context = require("./context");
/**
 * 此类型是 `<Map>` 组件传递给子组件(如 `<Marker>`)的两个 props
 */

var useMap = exports.useMap = function useMap() {
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var other = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(props), props));
  var _useState = (0, _react.useState)(),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    map = _useState2[0],
    setMap = _useState2[1];
  var _useState3 = (0, _react.useState)(props.zoom || 15),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    zoom = _useState4[0],
    setZoom = _useState4[1];
  var _useState5 = (0, _react.useState)(props.container),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    container = _useState6[0],
    setContainer = _useState6[1];
  var _useContext = (0, _react.useContext)(_context.Context),
    dispatch = _useContext.dispatch;
  (0, _react.useEffect)(function () {
    if (container && !map && AMap) {
      container.className = container.className + ' react-amap-wapper';
      var instance = new AMap.Map(container, (0, _objectSpread2["default"])({
        zoom: zoom
      }, other));
      setMap(instance);
    }
    return function () {
      if (map) {
        map.clearInfoWindow();
        map.clearLimitBounds();
        map.clearMap();
        map.destroy();
        setMap(undefined);
      }
    };
  }, [container, map]);
  (0, _react.useEffect)(function () {
    if (map && container) {
      dispatch({
        map: map,
        container: container,
        AMap: AMap
      });
    }
    return function () {
      dispatch({
        map: undefined,
        container: undefined,
        AMap: undefined
      });
    };
  }, [map, container]);
  (0, _react.useMemo)(function () {
    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]);
  (0, _react.useMemo)(function () {
    if (props.center && map) {
      map.setCenter(props.center);
    }
  }, [map, props.center]);
  (0, _reactAmapUtils.useSetStatus)(map, props, ['dragEnable', 'zoomEnable', 'jogEnable', 'pitchEnable', 'rotateEnable', 'animateEnable', 'keyboardEnable']);
  // setStatus, setZoomAndCenter, setFitView
  // 'Center',
  (0, _reactAmapUtils.useSettingProperties)(map, props, ['Zoom', 'LabelzIndex', 'Layers', 'City', 'Bounds', 'LimitBounds', 'Lang', 'Rotation', 'DefaultCursor', 'MapStyle', 'Features', 'DefaultLayer', 'Pitch']);
  (0, _reactAmapUtils.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: map,
    setMap: setMap,
    zoom: zoom,
    setZoom: setZoom,
    container: container,
    setContainer: setContainer
  };
};