diff --git a/src/components/Main.jsx b/src/components/Main.jsx
index 5b04b46..4dccfde 100644
--- a/src/components/Main.jsx
+++ b/src/components/Main.jsx
@@ -1,7 +1,41 @@
+import { useEffect } from 'react';
+import AMapLoader from '@amap/amap-jsapi-loader';
+
 export default function Main() {
+    let map = null;
+
+    useEffect(() => {
+        window._AMapSecurityConfig = {
+            securityJsCode: "7293e2505019e75d272458871f0f2818",
+        };
+        AMapLoader.load({
+            key: "e6d12cc0795d243c8bc4dc88d7349511", // 申请好的Web端开发者Key，首次调用 load 时必填
+            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+            plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
+        })
+            .then((AMap) => {
+                map = new AMap.Map("container", {
+                    // 设置地图容器id
+                    viewMode: "3D", // 是否为3D地图模式
+                    zoom: 11, // 初始化地图级别
+                    center: [116.397428, 39.90923], // 初始化地图中心点位置
+                });
+            })
+            .catch((e) => {
+                console.log(e);
+            });
+
+        return () => {
+            map?.destroy();
+        };
+    }, []);
     return (
-        <main className="flex flex-col items-center justify-center">
-            <h1 className="text-3xl font-bold">欢迎使用全球水文数据云</h1>
+        <main className="flex flex-col items-center justify-center h-[calc(100%-100px)]">
+            <div
+                id="container"
+                className="w-full h-full">
+
+            </div>
         </main>
     )
 }
\ No newline at end of file