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

Baidu Map Components for React.

import { useEffect, useState, useMemo, useContext } from 'react';
import { useEnableProperties, useProperties, useEventProperties } from '@uiw/react-baidu-map-utils';
import { Context } from "./context.js";
/**
 * 此类型是 `<Map>` 组件传递给子组件(如 `<Marker>`)的两个 `props`
 */
export function useMap(props) {
  if (props === void 0) {
    props = {};
  }
  var {
    widget,
    minZoom,
    maxZoom,
    mapType,
    enableHighResolution,
    enableAutoResize,
    enableMapClick
  } = props;
  var [map, setMap] = useState();
  var [zoom, setZoom] = useState(props.zoom || 15);
  var [container, setContainer] = useState(props.container);
  var {
    dispatch
  } = useContext(Context);
  useMemo(() => {
    if (container && !map && BMap) {
      var instance = new BMap.Map(container, {
        minZoom,
        maxZoom,
        mapType,
        enableHighResolution,
        enableAutoResize,
        enableMapClick
      });
      /**
       * 加载控件
       */
      widget && widget.forEach(item => {
        if (!BMap) {
          return;
        }
        if (typeof item === 'string') {
          var Control = BMap[item];
          Control && instance.addControl(new Control());
        } else if (typeof item === 'object' && item.control && typeof item.control === 'function') {
          instance.addControl(item.control(BMap, instance));
        } else if (typeof item === 'object' && item.name) {
          var options = typeof item.options === 'function' ? item.options(BMap, instance) : item.options;
          var _Control = BMap[item.name];
          _Control && instance.addControl(new _Control(options));
        }
      });
      setMap(instance);
    }
    return () => {
      if (map) {
        map.clearOverlays();
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [container, map]);
  useEffect(() => {
    if (map && container) {
      dispatch({
        map,
        container,
        BMap
      });
    }
    return () => {
      dispatch({
        map: undefined,
        container: undefined,
        BMap: undefined
      });
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [map, container]);
  var [center, setCenter] = useState(props.center || '上海');
  /**
   * 根据参数设置中心点
   */
  useEffect(() => {
    if (map && center) {
      var cent = center;
      if (center && center.lng && center.lat) {
        cent = new BMap.Point(center.lng, center.lat);
        map.centerAndZoom(cent, zoom);
      }
      map.centerAndZoom(center, zoom);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [center, map]);
  var [autoLocalCity, setAutoLocalCity] = useState(props.autoLocalCity);
  /**
   * IP定位获取当前城市，进行自动定位
   */
  useEffect(() => {
    if (map && autoLocalCity) {
      var myCity = new BMap.LocalCity();
      myCity.get(result => {
        setCenter(result.name);
        setZoom(result.level);
        setAutoLocalCity(false);
      });
    }
  }, [autoLocalCity, map]);
  useEventProperties(map, props, ['Click', 'DblClick', 'RightClick', 'RightdblClick', 'MapTypeChange', 'MouseMove', 'MouseOver', 'MouseOut', 'MoveStart', 'Moving', 'MoveEnd', 'ZoomStart', 'ZoomEnd', 'AddOverlay', 'AddControl', 'RemoveControl', 'RemoveOverlay', 'ClearOverlays', 'DragStart', 'Dragging', 'DragEnd', 'AddTileLayer', 'RemoveTileLayer', 'Load', 'ReSize', 'HotspotClick', 'HotspotOver', 'HotspotOut', 'TilesLoaded', 'TouchStart', 'TouchMove', 'TouchEnd', 'LongPress']);
  // 'Center',
  useProperties(map, props, ['DefaultCursor', 'DraggingCursor', 'MinZoom', 'MaxZoom', 'MapStyle', 'MapStyleV2', 'Panorama', 'CurrentCity', 'MapType', 'Viewport', 'Zoom']);
  useEnableProperties(map, props, ['Dragging', 'ScrollWheelZoom', 'DoubleClickZoom', 'Keyboard', 'InertialDragging', 'ContinuousZoom', 'PinchToZoom', 'AutoResize']);
  return {
    map,
    setMap,
    zoom,
    setZoom,
    container,
    setContainer,
    center,
    setCenter,
    autoLocalCity,
    setAutoLocalCity
  };
}