From 29e8372c3002d403d66085e7ce42135dd8f82b11 Mon Sep 17 00:00:00 2001
From: chengxuya <chengxuya@yeah.net>
Date: Thu, 8 May 2025 17:23:25 +0800
Subject: [PATCH] =?UTF-8?q?=E9=92=88=E5=AF=B9footprint=E4=B8=AD=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E7=9A=84=E4=B8=80=E7=82=B9=E4=BC=98=E5=8C=96=E6=84=8F?=
 =?UTF-8?q?=E8=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/footprint/page.scss | 18 +++++++++++++++++-
 src/app/footprint/page.tsx  | 36 +++++++++++++++++-------------------
 src/styles/index.scss       |  2 +-
 3 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/app/footprint/page.scss b/src/app/footprint/page.scss
index ccbde4d..bf4edde 100755
--- a/src/app/footprint/page.scss
+++ b/src/app/footprint/page.scss
@@ -3,4 +3,20 @@
     margin: 0px;
     width: 100%;
     height: 100vh;
-}
\ No newline at end of file
+}
+
+.animation_marker {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.4);
+    }
+    50% {
+        box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.7);
+    }
+    100% {
+        box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.4);
+    }
+}
diff --git a/src/app/footprint/page.tsx b/src/app/footprint/page.tsx
index ea73c2d..cde6838 100755
--- a/src/app/footprint/page.tsx
+++ b/src/app/footprint/page.tsx
@@ -1,6 +1,8 @@
 "use client"
 
 import { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+
 import { Modal, ModalContent, ModalHeader, ModalBody, useDisclosure } from "@heroui/react";
 import { getFootprintListAPI } from "@/api/footprint";
 import { Footprint } from "@/types/app/footprint";
@@ -71,27 +73,23 @@ export default function MapContainer() {
 
                     // 遍历 locations 数组，创建标记
                     list?.forEach((data) => {
+                        let markerContent: HTMLDivElement | undefined = undefined;
+                        if (data?.images[0]) {
+                          // content可以使用react的方式去实现，这样可以使用tailwindcss，下边的infoWindow中的Content也可以使用同样的方式优化一下
+                          markerContent = document.createElement("div");
+                          const root = createRoot(markerContent);
+                          // 甚至render中的内容可以封装成一个单独的组件呢，尤其是infoWindow中的Content的代码还是很多的
+                          root.render((
+                              <div
+                                className="flex justify-content items-center bg-[#fff] w-[35px] h-[35px] rounded-full overflow-hidden shadow-[0_0_5px_1px_rgba(255,255,255,0.4)] animation_marker">
+                                  <img src={`${data?.images[0]}`} alt="" className="w-[90%] h-[90%] rounded-full" />
+                              </div>
+                          ));
+                        }
                         const marker = new AMap.Marker({
                             position: data?.position.split(","),
                             map: map,
-                            content: data?.images[0] && `
-                            <div style="display: flex; justify-content: center; align-items: center; background-color: #fff; width: 35px; height: 35px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.4); animation: pulse 2s infinite;">
-                                <img src="${data?.images[0]}" alt="" style="width: 90%; height: 90%; border-radius: 50%;">
-                            </div>
-                            <style>
-                                @keyframes pulse {
-                                    0% {
-                                        box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.4);
-                                    }
-                                    50% {
-                                        box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.7);
-                                    }
-                                    100% {
-                                        box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.4);
-                                    }
-                                }
-                            </style>
-                            `
+                            content: markerContent
                         });
 
                         // 点击标记时，显示信息窗体并定位到该位置
@@ -233,4 +231,4 @@ export default function MapContainer() {
             </Modal>
         </>
     );
-}
\ No newline at end of file
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 798782c..5d2fbdb 100755
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -146,4 +146,4 @@ body {
 //     *::before {
 //         transition-duration: 0s !important;
 //     }
-// }
\ No newline at end of file
+// }
-- 
Gitee