diff --git a/.storybook/main.js b/.storybook/main.js
index 93c1fc8..2c7583f 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,9 +1,9 @@
-const path = require('path');
+const path = require("path");
 
 module.exports = {
-  logLevel: 'debug',
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  addons: ['@storybook/addon-essentials'],
+  logLevel: "debug",
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
+  addons: ["@storybook/addon-essentials"],
   /**
    * storybook with typescript
    * see https://storybook.js.org/docs/configurations/typescript-config/
@@ -13,19 +13,19 @@ module.exports = {
       test: /\.(ts|tsx)$/,
       use: [
         {
-          loader: require.resolve('ts-loader'),
+          loader: require.resolve("ts-loader"),
         },
         // Optional
         {
-          loader: require.resolve('react-docgen-typescript-loader'),
+          loader: require.resolve("react-docgen-typescript-loader"),
         },
       ],
     });
-    config.resolve.extensions.unshift('.ts', '.tsx', '.mdx');
-    config.resolve.modules = [...config.resolve.modules, path.resolve(__dirname, '..', 'src')];
+    config.resolve.extensions.unshift(".ts", ".tsx", ".mdx");
+    // config.resolve.modules = [...config.resolve.modules, path.resolve(__dirname, '..', 'src')];
     config.resolve.alias = {
       ...config.resolve.alias,
-      '@': path.resolve(__dirname, '..', 'src'),
+      // '@': path.resolve(__dirname, '..', 'src'),
     };
     return config;
   },
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 4bf40cc..beee0ec 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,10 +1,11 @@
 import React, { Suspense } from "react";
 
-export const decorators = [
-  (renderStory, context) => (
-    <Suspense fallback="loading">{renderStory({}, context)}</Suspense>
-  ),
-];
+const withSuspense = (renderStory, context) => (
+  <Suspense fallback="loading">{renderStory({}, context)}</Suspense>
+);
+
+export const decorators = [withSuspense];
+
 export const parameters = {
   options: {
     storySort: {
diff --git a/package-lock.json b/package-lock.json
index 7345cb4..8c8aa44 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
         "lint-staged": "^13.0.3",
         "prettier": "^2.0.5",
         "react-docgen-typescript-loader": "^3.7.2",
+        "react-intersection-observer": "^9.5.2",
         "rollup": "^2.40.0",
         "rollup-plugin-filesize": "^10.0.0",
         "rollup-plugin-terser": "^7.0.2",
@@ -24058,6 +24059,15 @@
         "react": "^16.8.4 || ^17.0.0"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.5.2",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.5.2.tgz",
+      "integrity": "sha512-EmoV66/yvksJcGa1rdW0nDNc4I1RifDWkT50gXSFnPLYQ4xUptuDD4V7k+Rj1OgVAlww628KLGcxPXFlOkkU/Q==",
+      "dev": true,
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -49292,6 +49302,13 @@
         "prop-types": "^15.0.0"
       }
     },
+    "react-intersection-observer": {
+      "version": "9.5.2",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.5.2.tgz",
+      "integrity": "sha512-EmoV66/yvksJcGa1rdW0nDNc4I1RifDWkT50gXSFnPLYQ4xUptuDD4V7k+Rj1OgVAlww628KLGcxPXFlOkkU/Q==",
+      "dev": true,
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 05fa70d..f1415f3 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "lint-staged": "^13.0.3",
     "prettier": "^2.0.5",
     "react-docgen-typescript-loader": "^3.7.2",
+    "react-intersection-observer": "^9.5.2",
     "rollup": "^2.40.0",
     "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-terser": "^7.0.2",
diff --git a/src/components/AMapAPIContainer/stories/createAMapAPIContainer.stories.tsx b/src/components/AMapAPIContainer/stories/createAMapAPIContainer.stories.tsx
index 3eeb0d1..129a941 100644
--- a/src/components/AMapAPIContainer/stories/createAMapAPIContainer.stories.tsx
+++ b/src/components/AMapAPIContainer/stories/createAMapAPIContainer.stories.tsx
@@ -1,13 +1,12 @@
 import React, { useRef, useEffect, Suspense } from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 
-import { createAMapAPIContainer, useAMapAPI } from 'index';
+import { createAMapAPIContainer, useAMapAPI } from '../../../index';
 
 const AMAP_API_KEY: string = process.env.STORYBOOK_AMAP_API_KEY || '';
 
 export default {
   title: '组件(Components)/基础组件(Basic)/AMapAPIContainer',
-  excludeStories: ['AsyncPluginAPIContainer'],
 } as Meta;
 
 const SyncPluginAPIContainer = createAMapAPIContainer({
@@ -22,7 +21,7 @@ const SyncPluginAPIContainer = createAMapAPIContainer({
   },
 });
 
-export const AsyncPluginAPIContainer = createAMapAPIContainer({
+const AsyncPluginAPIContainer = createAMapAPIContainer({
   key: AMAP_API_KEY,
   version: '2.0',
   AMapUI: {
diff --git a/src/components/AMapCircle/stories/AMapCircle.stories.tsx b/src/components/AMapCircle/stories/AMapCircle.stories.tsx
index 04d1b20..da69f13 100644
--- a/src/components/AMapCircle/stories/AMapCircle.stories.tsx
+++ b/src/components/AMapCircle/stories/AMapCircle.stories.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
-import { AMapCircle, AMapCircleProps } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
-import withAutoFitView from '../../AMapAutoFitView/stories/withAutoFitView';
+import { AMapCircle, AMapCircleProps } from '../../../index';
+
+import withAutoFitView from '../../../storybook-decorators/withAutoFitView';
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions(
   'onShow',
@@ -23,7 +26,12 @@ const eventHandler = actions(
 
 export default {
   title: '组件(Components)/覆盖物(Overlay)/AMapCircle',
-  decorators: [withAutoFitView, withAMapContainer],
+  decorators: [
+    withAutoFitView,
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     center: [116.39, 39.9],
     radius: 10_000,
diff --git a/src/components/AMapControlBar/stories/AMapControlBar.stories.tsx b/src/components/AMapControlBar/stories/AMapControlBar.stories.tsx
index 7fdf6c4..6b22243 100644
--- a/src/components/AMapControlBar/stories/AMapControlBar.stories.tsx
+++ b/src/components/AMapControlBar/stories/AMapControlBar.stories.tsx
@@ -1,16 +1,23 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import type { Story, Meta } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
-import { AMapControlBar, AMapControlBarProps } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
+import { AMapControlBar, AMapControlBarProps } from '../../../index';
+
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions('onShow', 'onHide');
 
 export default {
   title: '组件(Components)/地图控件(Control)/AMapControlBar',
   component: AMapControlBar,
-  decorators: [withAMapContainer],
+  decorators: [
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     position: 'LT',
     offset: [10, 10],
diff --git a/src/components/AMapEllipse/stories/AMapEllipse.stories.tsx b/src/components/AMapEllipse/stories/AMapEllipse.stories.tsx
index a660f61..3d0e331 100644
--- a/src/components/AMapEllipse/stories/AMapEllipse.stories.tsx
+++ b/src/components/AMapEllipse/stories/AMapEllipse.stories.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
-import { AMapEllipse, AMapEllipseProps } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
-import withAutoFitView from '../../AMapAutoFitView/stories/withAutoFitView';
+import { AMapEllipse, AMapEllipseProps } from '../../../index';
+
+import withAutoFitView from '../../../storybook-decorators/withAutoFitView';
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions(
   'onShow',
@@ -23,7 +26,12 @@ const eventHandler = actions(
 
 export default {
   title: '组件(Components)/覆盖物(Overlay)/AMapEllipse',
-  decorators: [withAutoFitView, withAMapContainer],
+  decorators: [
+    withAutoFitView,
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     center: [116.39, 39.9],
     radius: [10_000, 5_000],
diff --git a/src/components/AMapGeoJSON/stories/AMapGeoJSON.stories.tsx b/src/components/AMapGeoJSON/stories/AMapGeoJSON.stories.tsx
index 44c85b7..3dfe98e 100644
--- a/src/components/AMapGeoJSON/stories/AMapGeoJSON.stories.tsx
+++ b/src/components/AMapGeoJSON/stories/AMapGeoJSON.stories.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 
-import type { AMapGeoJSONGetOverlayCallback, AMapGeoJSONProps } from 'index';
-import { AMapGeoJSON, coordsOfGeoJSON2AMapPolygonPath } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
-import withAutoFitView from '../../AMapAutoFitView/stories/withAutoFitView';
+import type { AMapGeoJSONGetOverlayCallback, AMapGeoJSONProps } from '../../../index';
+import { AMapGeoJSON, coordsOfGeoJSON2AMapPolygonPath } from '../../../index';
+
+import withAutoFitView from '../../../storybook-decorators/withAutoFitView';
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const point: GeoJSON.Point = {
   type: 'Point',
@@ -97,7 +100,12 @@ const mockData: GeoJSON.FeatureCollection = {
 
 export default {
   title: '组件(Components)/覆盖物(Overlay)/AMapGeoJSON',
-  decorators: [withAutoFitView, withAMapContainer],
+  decorators: [
+    withAutoFitView,
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     geoJSON: mockData,
     visible: true,
diff --git a/src/components/AMapHawkEye/stories/AMapHawkEye.stories.tsx b/src/components/AMapHawkEye/stories/AMapHawkEye.stories.tsx
index dab6d91..6382b36 100644
--- a/src/components/AMapHawkEye/stories/AMapHawkEye.stories.tsx
+++ b/src/components/AMapHawkEye/stories/AMapHawkEye.stories.tsx
@@ -1,16 +1,23 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import type { Story, Meta } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
-import { AMapHawkEye, AMapHawkEyeProps } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
+import { AMapHawkEye, AMapHawkEyeProps } from '../../../index';
+
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions('onShow', 'onHide', 'onOpen', 'onClose');
 
 export default {
   title: '组件(Components)/地图控件(Control)/AMapHawkEye',
   component: AMapHawkEye,
-  decorators: [withAMapContainer],
+  decorators: [
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     autoMove: true,
     showRectangle: true,
diff --git a/src/components/AMapMap/stories/AMapMap.stories.tsx b/src/components/AMapMap/stories/AMapMap.stories.tsx
index d99062b..e6d583e 100644
--- a/src/components/AMapMap/stories/AMapMap.stories.tsx
+++ b/src/components/AMapMap/stories/AMapMap.stories.tsx
@@ -1,22 +1,20 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 
-import { AMapMap, AMapMapProps } from 'index';
+import { AMapMap, AMapMapProps } from '../../../index';
 
-import { AsyncPluginAPIContainer as APIContainer } from '../../AMapAPIContainer/stories/createAMapAPIContainer.stories';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 AMapMap.displayName = 'AMapMap';
 
-const withAPIContainer = (renderStory: Story, context: any) => (
-  <APIContainer>
-    <div style={{ height: '400px' }}>{renderStory({}, context)}</div>
-  </APIContainer>
-);
-
 export default {
   title: '组件(Components)/基础组件(Basic)/AMapMap',
   component: AMapMap,
-  decorators: [withAPIContainer],
+  decorators: [
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     center: undefined,
     cityName: undefined,
@@ -46,7 +44,6 @@ export default {
       },
     },
   },
-  excludeStories: ['withAMapContainer'],
 } as Meta;
 
 const Template: Story<AMapMapProps> = (args) => <AMapMap {...args} />;
@@ -68,11 +65,3 @@ SetZoom.args = {
   zoom: 12,
 };
 SetZoom.storyName = '设置缩放比例';
-
-export const withAMapContainer = (renderStory: Story, context: any) => (
-  <APIContainer>
-    <div style={{ height: 'calc(100vh - 70px)' }}>
-      <AMapMap>{renderStory({}, context)}</AMapMap>
-    </div>
-  </APIContainer>
-);
diff --git a/src/components/AMapMapType/stories/AMapMapType.stories.tsx b/src/components/AMapMapType/stories/AMapMapType.stories.tsx
index 79e1164..548bce0 100644
--- a/src/components/AMapMapType/stories/AMapMapType.stories.tsx
+++ b/src/components/AMapMapType/stories/AMapMapType.stories.tsx
@@ -1,16 +1,23 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import type { Story, Meta } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
-import { AMapMapType, AMapMapTypeProps } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
+import { AMapMapType, AMapMapTypeProps } from '../../../index';
+
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions('onShow', 'onHide');
 
 export default {
   title: '组件(Components)/地图控件(Control)/AMapMapType',
   component: AMapMapType,
-  decorators: [withAMapContainer],
+  decorators: [
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     defaultType: 0,
     visible: true,
diff --git a/src/components/AMapMarker/stories/AMapMarker.stories.tsx b/src/components/AMapMarker/stories/AMapMarker.stories.tsx
index 7a0c20e..36c45b0 100644
--- a/src/components/AMapMarker/stories/AMapMarker.stories.tsx
+++ b/src/components/AMapMarker/stories/AMapMarker.stories.tsx
@@ -1,10 +1,18 @@
 import React from 'react';
 import { renderToString } from 'react-dom/server';
-import { Story, Meta } from '@storybook/react';
+import type { Story, Meta } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
-import { AMapToolBar, AMapMarker, AMapMarkerProps } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
+import {
+  AMapToolBar,
+  AMapMarker,
+  AMapMarkerProps,
+} from '../../../index';
+
+import withAutoFitView from '../../../storybook-decorators/withAutoFitView';
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions(
   'onHide',
@@ -31,7 +39,12 @@ const eventHandler = actions(
 export default {
   title: '组件(Components)/覆盖物(Overlay)/AMapMarker',
   component: AMapMarker,
-  decorators: [withAMapContainer],
+  decorators: [
+    withAutoFitView,
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     position: [116.39, 39.9],
     title: '自定义的 Title',
diff --git a/src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx b/src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx
index 9e12419..25d6cce 100644
--- a/src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx
+++ b/src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx
@@ -1,15 +1,22 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
-import { AMapMouseTool, AMapMouseToolProps } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
+import { AMapMouseTool, AMapMouseToolProps } from '../../../index';
+
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions('onCompleted');
 
 export default {
   title: '组件(Components)/工具(Tools)/AMapMouseTool',
-  decorators: [withAMapContainer],
+  decorators: [
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     type: 'polygon',
     options: {
diff --git a/src/components/AMapOverlayGroup/stories/AMapOverlayGroup.stories.tsx b/src/components/AMapOverlayGroup/stories/AMapOverlayGroup.stories.tsx
index 9c2570d..a70f1a8 100644
--- a/src/components/AMapOverlayGroup/stories/AMapOverlayGroup.stories.tsx
+++ b/src/components/AMapOverlayGroup/stories/AMapOverlayGroup.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
 import {
@@ -9,9 +9,12 @@ import {
   AMapCircle,
   AMapEllipse,
   AMapMarker,
-} from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
-import withAutoFitView from '../../AMapAutoFitView/stories/withAutoFitView';
+} from '../../../index';
+
+import withAutoFitView from '../../../storybook-decorators/withAutoFitView';
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions(
   'onShow',
@@ -30,7 +33,12 @@ const eventHandler = actions(
 
 export default {
   title: '组件(Components)/覆盖物(Overlay)/AMapOverlayGroup',
-  decorators: [withAutoFitView, withAMapContainer],
+  decorators: [
+    withAutoFitView,
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     visible: true,
     onShow: eventHandler.onShow,
diff --git a/src/components/AMapPolygon/stories/AMapPolygon.stories.tsx b/src/components/AMapPolygon/stories/AMapPolygon.stories.tsx
index c14a9af..923da90 100644
--- a/src/components/AMapPolygon/stories/AMapPolygon.stories.tsx
+++ b/src/components/AMapPolygon/stories/AMapPolygon.stories.tsx
@@ -1,16 +1,20 @@
 import React, {
   createRef,
 } from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
 import {
-  AMapPolygon, AMapPolygonProps,
+  AMapPolygon,
+  AMapPolygonProps,
   AMapPolygonEditor,
   AMapPolygonEditorProps,
-} from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
-import withAutoFitView from '../../AMapAutoFitView/stories/withAutoFitView';
+} from '../../../index';
+
+import withAutoFitView from '../../../storybook-decorators/withAutoFitView';
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions(
   'onHide',
@@ -32,7 +36,12 @@ const eventHandler = actions(
 
 export default {
   title: '组件(Components)/覆盖物(Overlay)/AMapPolygon',
-  decorators: [withAutoFitView, withAMapContainer],
+  decorators: [
+    withAutoFitView,
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     path: [
       [116.386069, 39.898857],
diff --git a/src/components/AMapPolygonEditor/stories/AMapPolygonEditor.stories.tsx b/src/components/AMapPolygonEditor/stories/AMapPolygonEditor.stories.tsx
index 10d5c7f..5f1340a 100644
--- a/src/components/AMapPolygonEditor/stories/AMapPolygonEditor.stories.tsx
+++ b/src/components/AMapPolygonEditor/stories/AMapPolygonEditor.stories.tsx
@@ -1,11 +1,17 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import type { AMapPolygonEditorProps } from 'index';
-import { AMapGeoJSON, AMapPolygonEditor } from 'index';
+import type { Meta, Story } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
-import withAutoFitView from '../../AMapAutoFitView/stories/withAutoFitView';
+
+import {
+  AMapGeoJSON,
+  AMapPolygonEditor,
+  AMapPolygonEditorProps,
+} from '../../../index';
+
+import withAutoFitView from '../../../storybook-decorators/withAutoFitView';
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions(
   'onChange',
@@ -91,7 +97,12 @@ const mockData: GeoJSON.FeatureCollection = {
 
 export default {
   title: '组件(Components)/工具(Tools)/AMapPolygonEditor',
-  decorators: [withAutoFitView, withAMapContainer],
+  decorators: [
+    withAutoFitView,
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     computeTarget: (polygons: Parameters<AMapPolygonEditorProps['computeTarget']>[0]) => polygons[0],
     onChange: eventHandler.onChange,
diff --git a/src/components/AMapScale/stories/AMapScale.stories.tsx b/src/components/AMapScale/stories/AMapScale.stories.tsx
index 5232910..2a00700 100644
--- a/src/components/AMapScale/stories/AMapScale.stories.tsx
+++ b/src/components/AMapScale/stories/AMapScale.stories.tsx
@@ -1,16 +1,23 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import type { Story, Meta } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
-import { AMapScale, AMapScaleProps } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
+import { AMapScale, AMapScaleProps } from '../../../index';
+
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions('onShow', 'onHide');
 
 export default {
   title: '组件(Components)/地图控件(Control)/AMapScale',
   component: AMapScale,
-  decorators: [withAMapContainer],
+  decorators: [
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     position: 'LB',
     offset: [10, 10],
diff --git a/src/components/AMapToolBar/stories/AMapToolBar.stories.tsx b/src/components/AMapToolBar/stories/AMapToolBar.stories.tsx
index 7ceb962..07de30b 100644
--- a/src/components/AMapToolBar/stories/AMapToolBar.stories.tsx
+++ b/src/components/AMapToolBar/stories/AMapToolBar.stories.tsx
@@ -1,16 +1,23 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import type { Story, Meta } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
-import { AMapToolBar, AMapToolBarProps } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
+import { AMapToolBar, AMapToolBarProps } from '../../../index';
+
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions('onShow', 'onHide');
 
 export default {
   title: '组件(Components)/地图控件(Control)/AMapToolBar',
   component: AMapToolBar,
-  decorators: [withAMapContainer],
+  decorators: [
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     position: 'LT',
     offset: [10, 10],
diff --git a/src/storybook-decorators/withAMap.tsx b/src/storybook-decorators/withAMap.tsx
new file mode 100644
index 0000000..040e7b1
--- /dev/null
+++ b/src/storybook-decorators/withAMap.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { Story } from '@storybook/react';
+
+import { AMapMap } from '../index';
+
+const withAMap = (renderStory: Story, context: any) => (
+  <AMapMap>{renderStory({}, context)}</AMapMap>
+);
+
+export default withAMap;
diff --git a/src/storybook-decorators/withAMapContainer.tsx b/src/storybook-decorators/withAMapContainer.tsx
new file mode 100644
index 0000000..0b6649b
--- /dev/null
+++ b/src/storybook-decorators/withAMapContainer.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { FC } from 'react';
+import { useRef } from 'react';
+import type { Story } from '@storybook/react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useInView } from 'react-intersection-observer';
+
+const CONTAINER_STYLE = { height: 'calc(100vh - 70px)' };
+
+const AMapContainer: FC = ({ children }) => {
+  const { ref, inView } = useInView({
+    /* Optional options */
+    threshold: 0,
+  });
+
+  const preChildren = useRef<any>(null);
+
+  if (inView) {
+    preChildren.current = children;
+  }
+
+  return (
+    <div ref={ref} style={CONTAINER_STYLE}>
+      {inView ? children : preChildren.current}
+    </div>
+  );
+};
+
+const withAMapContainer = (renderStory: Story, context: any) => (
+  <AMapContainer>
+    {renderStory({}, context)}
+  </AMapContainer>
+);
+
+export default withAMapContainer;
diff --git a/src/storybook-decorators/withAPIContainer.tsx b/src/storybook-decorators/withAPIContainer.tsx
new file mode 100644
index 0000000..6b119ec
--- /dev/null
+++ b/src/storybook-decorators/withAPIContainer.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { Story } from '@storybook/react';
+
+import { createAMapAPIContainer } from '../index';
+
+const AMAP_API_KEY: string = process.env.STORYBOOK_AMAP_API_KEY || '';
+
+const APIContainer = createAMapAPIContainer({
+  key: AMAP_API_KEY,
+  version: '2.0',
+  AMapUI: {
+    version: '1.1',
+  },
+});
+
+const withAPIContainer = (renderStory: Story, context: any) => (
+  <APIContainer>
+    {renderStory({}, context)}
+  </APIContainer>
+);
+
+export default withAPIContainer;
diff --git a/src/components/AMapAutoFitView/stories/withAutoFitView.tsx b/src/storybook-decorators/withAutoFitView.tsx
similarity index 79%
rename from src/components/AMapAutoFitView/stories/withAutoFitView.tsx
rename to src/storybook-decorators/withAutoFitView.tsx
index bf800dd..c0f3948 100644
--- a/src/components/AMapAutoFitView/stories/withAutoFitView.tsx
+++ b/src/storybook-decorators/withAutoFitView.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Story } from '@storybook/react';
 
-import AMapAutoFitView from '..';
+import AMapAutoFitView from '../components/AMapAutoFitView';
 
 const withAutoFitView = (renderStory: Story, context: any) => (
   <>