fix: hiển thị market chỉ hướng người dùng di chuyển

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(() => {