add map

package-lock.json

@@ -8,6 +8,7 @@
       "name": "ball_admin",
       "version": "0.1.0",
       "dependencies": {
+        "@amap/amap-jsapi-loader": "^1.0.1",
         "@babel/core": "^7.16.0",
         "@craco/craco": "^6.4.5",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
@@ -58,6 +59,7 @@
         "postcss-preset-env": "^7.0.1",
         "prompts": "^2.4.2",
         "react": "^18.2.0",
+        "react-amap": "^1.2.8",
         "react-app-polyfill": "^3.0.0",
         "react-dev-utils": "^12.0.1",
         "react-dom": "^18.2.0",
@@ -85,6 +87,11 @@
       "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
       "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g=="
     },
+    "node_modules/@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -18831,6 +18838,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-amap": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/react-amap/-/react-amap-1.2.8.tgz",
+      "integrity": "sha512-uHPEUXti+CcwFyCeqGGqR0ACnXJA9D8S/lQYal9AG3XEOrwkaOFbWUavrvXxjcfAclROIWg8uKxzlRpMQnkHFg=="
+    },
     "node_modules/react-app-polyfill": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
@@ -31830,6 +31842,11 @@
       "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
       "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g=="
     },
+    "@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
     "@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -45627,6 +45644,11 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-amap": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/react-amap/-/react-amap-1.2.8.tgz",
+      "integrity": "sha512-uHPEUXti+CcwFyCeqGGqR0ACnXJA9D8S/lQYal9AG3XEOrwkaOFbWUavrvXxjcfAclROIWg8uKxzlRpMQnkHFg=="
+    },
     "react-app-polyfill": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@babel/core": "^7.16.0",
     "@craco/craco": "^6.4.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
@@ -53,6 +54,7 @@
     "postcss-preset-env": "^7.0.1",
     "prompts": "^2.4.2",
     "react": "^18.2.0",
+    "react-amap": "^1.2.8",
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.2.0",

src/components/map/MapComponent.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import AMapLoader from "@amap/amap-jsapi-loader";
+
+export default function MapContainer() {
+  let [amap, setmaps] = useState<any>(null);
+  useEffect(() => {
+    loadMaps();
+    return () => {
+      amap?.destroy();
+    };
+  }, []);
+
+  const loadMaps = async () => {
+    const Amap = await AMapLoader.load({
+      key: "d58999d072ed7e5897d3900a769cfda0", // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      plugins: ["AMap.Scale"],
+    });
+    amap = new Amap.Map("container", {
+      viewMode: "2D", // 是否为3D地图模式
+      zoom: 11, // 初始化地图级别
+      center: [103.55, 30.34], // 初始化地图中心点位置
+      mapStyle: "amap://styles/darkblue",
+    });
+    setmaps(amap);
+    addMaket(Amap);
+  };
+  const addMaket = (m) => {
+    const marker = new m.Marker({
+      position: new m.LngLat(103.55, 30.34),
+      title: "黄水",
+    });
+    //将创建的点标记添加到已有的地图实例：
+    amap.add(marker);
+  };
+
+  return <div id="container" style={{ height: "100vh" }}></div>;
+}

src/components/map/MapContainer.less

@@ -0,0 +1,5 @@
+.container{
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+  }

src/pages/home.less

@@ -2,17 +2,61 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
-    background-color: blue;
     position: relative;
-    .centerbox {
+    .map_container_t{
         position: absolute;
-        top: 50%;
+        height: 80px;
-        left: 50%;
+        top: 0;
-        transform: translate(-50%,-50%);
+        width: 100%;
-        width: 200px;
+        background: linear-gradient(270deg, rgba(7, 99, 78, 0) 0%, rgba(7, 99, 78, 0.0826) 32%, rgba(41, 173, 150, 0.16) 63%, rgba(91, 255, 234, 0.35) 100%);
-        height: 200px;
+        left: 0;
-        background-color: red;
+        right: 0;
-        line-height: 200px;
+        z-index: 1;
+    }
+    .map_container_l{
+        position: absolute;
+        left: 0px;
+        top: 80px;
+        bottom: 10px;
+        width: 15%;
+        bottom: 80px;
+        z-index: 1;
+        opacity: 1;
+        background: rgba(37, 52, 70, 0.4);
+        backdrop-filter: blur(10px);
+    }
+    .map_container_r{
+        position: absolute;
+        right: 0px;
+        top: 80px;
+        bottom: 80px;
+        width: 15%;
+        z-index: 1;
+        opacity: 1;
+        background: rgba(37, 52, 70, 0.4);
+        backdrop-filter: blur(10px);
+    }
+    .map_container_b{
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        background: rgba(37, 52, 70, 0.4);
+        height: 80px;
+        width: 100%;
+        left: 0;
+        z-index: 1;
         text-align: center;
+        .bottom_content{
+            display: inline-block;
+            padding-top: 15px;
+            >span{
+                background: linear-gradient(180deg, rgba(0, 193, 153, 0.1) 0%, rgba(0, 239, 151, 0.8) 100%);
+                padding: 5px 10px ;
+                color: #fff;
+                margin: 0 10px;
+                cursor: pointer;
+                font-size: 18px;
+            }
+        }
     }
 }

src/pages/home.tsx

@@ -1,12 +1,23 @@
 import { observer } from "mobx-react";
-import "./home.less"
+import "./home.less";
+import MapContainer from "@/components/map/MapComponent";
 const Home = observer(() => {
   return (
     <div className="contents_center">
-      
+      <div className="map_container_t"></div>
+      <div className="map_container_l"></div>
+      <MapContainer />
+      <div className="map_container_r"></div>
+      <div className="map_container_b">
+        <div className="bottom_content">
+          <span>民兵调度</span>
+          <span>装备调度</span>
+          <span>应急连线</span>
+          <span>应急预案</span>
+        </div>
+      </div>
     </div>
   );
 });
 
-
 export default Home;