From 68950dba10b75e36a2376a698faa366006c6ef69 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Thu, 18 Jun 2026 10:51:47 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20hi=E1=BB=83n=20th=E1=BB=8B=20market=20ch?=
 =?UTF-8?q?=E1=BB=89=20h=C6=B0=E1=BB=9Bng=20ng=C6=B0=E1=BB=9Di=20d=C3=B9ng?=
 =?UTF-8?q?=20di=20chuy=E1=BB=83n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/TourDetailPage.tsx | 37 ++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/TourDetailPage.tsx b/frontend/src/pages/TourDetailPage.tsx
index 91b8136..7a16fda 100644
--- a/frontend/src/pages/TourDetailPage.tsx
+++ b/frontend/src/pages/TourDetailPage.tsx
@@ -350,6 +350,21 @@ export const TourDetailPage = ({
   const [isAddMemberOpen, setIsAddMemberOpen] = useState(false);
   const [isAddPhotoOpen, setIsAddPhotoOpen] = useState(false);
 
+  // State cho vị trí và hướng của người dùng
+  
+
+ 
+  const [deviceOrientationHeading, setDeviceOrientationHeading] = useState<number | null>(null); // Hướng thiết bị (la bàn)
+
+  // Xác định hướng hiển thị của người dùng (ưu tiên hướng di chuyển từ GPS, sau đó đến la bàn thiết bị)
+  const currentHeading = useMemo(() => {
+    if (gpsHeading !== null && userSpeed !== null && userSpeed > 0.5) {
+      return gpsHeading;
+    } else if (deviceOrientationHeading !== null) {
+      return deviceOrientationHeading;
+    }
+    return 0;
+  }, [gpsHeading, userSpeed, deviceOrientationHeading]);
 
   // Định nghĩa Icons bên trong Component bằng useMemo để đảm bảo tính ổn định và tránh lỗi render
   const mapIcons = useMemo(() => ({
@@ -374,15 +389,23 @@ export const TourDetailPage = ({
     user: L.divIcon({
       className: '!bg-transparent !border-none',
       html: `
-        <div class="relative">
-          <div class="w-4 h-4 bg-blue-500 rounded-full border-2 border-white shadow-lg z-10"></div>
-          <div class="absolute -inset-2 bg-blue-400 rounded-full opacity-40 animate-ping"></div>
+        <div class="relative flex items-center justify-center">
+          <!-- Hiệu ứng ping tỏa lan -->
+          <div class="absolute w-8 h-8 bg-blue-400 rounded-full opacity-30 animate-ping"></div>
+          
+          <!-- Marker chính màu xanh -->
+          <div class="w-5 h-5 bg-blue-600 rounded-full border-2 border-white shadow-xl flex items-center justify-center z-10">
+            <!-- Mũi tên chỉ hướng nhìn (xoay theo heading) -->
+            <div style="transform: rotate(${currentHeading}deg); transition: transform 0.2s ease-out;" class="absolute inset-0 flex flex-col items-center">
+              <div class="w-0 h-0 border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-b-[8px] border-b-white mt-[1px]"></div>
+            </div>
+          </div>
         </div>
       `,
-      iconSize: [16, 16],
-      iconAnchor: [8, 8]
+      iconSize: [32, 32],
+      iconAnchor: [16, 16]
     })
-  }), []);
+  }), [currentHeading]);
 
   useEffect(() => {
     // Theo dõi vị trí GPS của người dùng (bao gồm hướng và tốc độ khi di chuyển)
@@ -404,7 +427,7 @@ export const TourDetailPage = ({
   }, [isPublicView]); // Chỉ phụ thuộc vào isPublicView
 
   // State mới cho hướng thiết bị (la bàn)
-  const [deviceOrientationHeading, setDeviceOrientationHeading] = useState<number | null>(null);
+  
 
   // Theo dõi hướng thiết bị (la bàn)
   useEffect(() => {