diff --git a/frontend/src/pages/TourDetailPage.tsx b/frontend/src/pages/TourDetailPage.tsx index 8600979..ee5ffa6 100644 --- a/frontend/src/pages/TourDetailPage.tsx +++ b/frontend/src/pages/TourDetailPage.tsx @@ -387,23 +387,38 @@ export const TourDetailPage = ({ // Theo dõi hướng thiết bị (la bàn) useEffect(() => { - if (window.DeviceOrientationEvent) { - const handleDeviceOrientation = (event: DeviceOrientationEvent) => { - // Sử dụng webkitCompassHeading cho iOS nếu có, nếu không thì dùng alpha - const heading = (event as any).webkitCompassHeading || event.alpha; - if (heading !== null && heading !== undefined) { - setDeviceOrientationHeading(heading); - } - }; + const handleOrientation = (event: any) => { + let heading: number | null = null; - window.addEventListener('deviceorientation', handleDeviceOrientation); - return () => { - window.removeEventListener('deviceorientation', handleDeviceOrientation); - }; - } else { - setDeviceOrientationHeading(null); - } - }, []); // Chạy một lần khi component mount + // 1. Đối với iOS: Sử dụng webkitCompassHeading (đã chuẩn hóa hướng Bắc thực) + if (event.webkitCompassHeading !== undefined && event.webkitCompassHeading !== null) { + heading = event.webkitCompassHeading; + } + // 2. Đối với Android (Chrome): Cần kiểm tra tính tuyệt đối của dữ liệu + else if (event.alpha !== null && event.alpha !== undefined) { + // Chrome trên Android chỉ cung cấp hướng la bàn chuẩn khi event.absolute là true + // hoặc khi nhận từ sự kiện 'deviceorientationabsolute' + if (event.absolute === true || event.type === 'deviceorientationabsolute') { + // Alpha trên Android tăng theo chiều ngược kim đồng hồ (0=North, 90=West) + // Cần chuyển đổi sang chiều kim đồng hồ để khớp với logic quay bản đồ + heading = (360 - event.alpha) % 360; + } + } + + if (heading !== null) { + setDeviceOrientationHeading(heading); + } + }; + + // Đăng ký cả hai loại sự kiện để hỗ trợ tối đa các dòng điện thoại + window.addEventListener('deviceorientation', handleOrientation, true); + window.addEventListener('deviceorientationabsolute', handleOrientation, true); + + return () => { + window.removeEventListener('deviceorientation', handleOrientation, true); + window.removeEventListener('deviceorientationabsolute', handleOrientation, true); + }; + }, []); // Logic kết hợp để xác định hướng xoay bản đồ useEffect(() => {