feat(Map): add container props.

uiwjs · Mar 1, 2022 · c03cc48 · c03cc48 · jaywcjlove · Mar 1, 2022
1 parent 518896e
commit c03cc48
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/packages/map/README.md b/packages/map/README.md
@@ -278,6 +278,7 @@ ReactDOM.render((
 
 | 参数 | 说明 | 类型 | 默认值 |
 |--------- |-------- |--------- |-------- |
+| container | (**默认不需要传递**) 构造一个地图对象，参数 container 中传入地图容器 DIV 对象。<br />注意：地图容器在创建之前必须拥有实际大小，否则可能出现底图无法渲染的问题。 | `HTMLDivElement` | - |
 | center | 初始中心经纬度 | `[number, number] \| LngLat` | - |
 
 ### 事件

diff --git a/packages/map/src/index.tsx b/packages/map/src/index.tsx
@@ -17,21 +17,25 @@ export * from './useMap';
 export * from './context';
 
 type RenderProps =
-  | { children: (data: { AMap: typeof AMap; map: AMap.Map; container?: HTMLDivElement | null }) => void }
-  | { children: React.ReactNode };
+  | { children?: (data: { AMap: typeof AMap; map: AMap.Map; container?: HTMLDivElement | null }) => void }
+  | { children?: React.ReactNode };
 
 export interface MapProps extends AMap.MapEvents, AMap.MapOptions {
   className?: React.HTMLAttributes<HTMLDivElement>['className'];
   style?: React.HTMLAttributes<HTMLDivElement>['style'];
+  container?: HTMLDivElement | null;
 }
 
 export const Map = forwardRef<MapProps & { map?: AMap.Map }, MapProps & RenderProps>(
   ({ className, style, children, ...props }, ref) => {
     const [state, dispatch] = useReducer(reducer, initialState);
     const elmRef = useRef<HTMLDivElement>(null);
-    const { setContainer, container, map } = useMap({ container: elmRef.current, ...props });
+    const { setContainer, container, map } = useMap({
+      container: props.container || (elmRef.current as MapProps['container']),
+      ...props,
+    });
     useEffect(() => setContainer(elmRef.current), [elmRef.current]);
-    useImperativeHandle(ref, () => ({ ...props, map, AMap, container: elmRef.current }), [map]);
+    useImperativeHandle(ref, () => ({ ...props, map, AMap, container: props.container || elmRef.current }), [map]);
     const childs = Children.toArray(children);
 
     useEffect(() => {
@@ -42,7 +46,9 @@ export const Map = forwardRef<MapProps & { map?: AMap.Map }, MapProps & RenderPr
 
     return (
       <Context.Provider value={{ state, dispatch }}>
-        <div ref={elmRef} className={className} style={{ fontSize: 1, height: '100%', ...style }} />
+        {!props.container && (
+          <div ref={elmRef} className={className} style={{ fontSize: 1, height: '100%', ...style }} />
+        )}
         {AMap && map && typeof children === 'function' && children({ AMap, map, container })}
         {AMap &&
           map &&

diff --git a/packages/map/src/useMap.tsx b/packages/map/src/useMap.tsx
@@ -30,17 +30,25 @@ export const useMap = (props: UseMap = {}) => {
   const { ...other } = props;
   const [map, setMap] = useState<AMap.Map>();
   const [zoom, setZoom] = useState(props.zoom || 15);
-  const [container, setContainer] = useState(props.container);
+  const [container, setContainer] = useState<HTMLDivElement | null | undefined>(props.container);
   const { dispatch } = useContext(Context);
   useEffect(() => {
     let instance: AMap.Map;
     if (container && !map && AMap) {
-      instance = new AMap.Map(container, { zoom, ...other });
+      const wapper = document.createElement('div');
+      wapper.className = 'react-amap-wapper';
+      wapper.style.height = '100%';
+      wapper.style.width = '100%';
+      instance = new AMap.Map(wapper, { zoom, ...other });
+      container.appendChild(wapper);
       setMap(instance);
     }
     return () => {
       if (instance) {
         instance.destroy();
+        instance.clearMap();
+        instance.clearInfoWindow();
+        instance.clearLimitBounds();
         setMap(undefined);
       }
     };