diff --git a/frontend/src/pages/TourDetailPage.tsx b/frontend/src/pages/TourDetailPage.tsx index 2b9bc1d..58e643d 100644 --- a/frontend/src/pages/TourDetailPage.tsx +++ b/frontend/src/pages/TourDetailPage.tsx @@ -27,6 +27,7 @@ import { Map as MapIconLucide, MapPin, Search, + LocateFixed, Loader2, Car, Bike, @@ -87,6 +88,16 @@ const MapTourBounds = ({ locations }: { locations: any[] }) => { return null; }; +// Component Helper để di chuyển tâm bản đồ về vị trí người dùng khi nhấn nút +const RecenterUser = ({ position, trigger }: { position: [number, number] | null, trigger: number }) => { + const map = useMap(); + useEffect(() => { + if (position && trigger > 0) { + map.setView(position, 16, { animate: true }); + } + }, [trigger, position, map]); + return null; +}; // Menu ngữ cảnh cho bản đồ const MapContextMenu = ({ onAction }: { onAction: (action: string, latlng: L.LatLng) => void }) => { const [menuPos, setMenuPos] = useState<{ x: number, y: number, latlng: L.LatLng } | null>(null); @@ -297,6 +308,7 @@ export const TourDetailPage = ({ const [searchQuery, setSearchQuery] = useState(''); const [searchResults, setSearchResults] = useState([]); const [isSearching, setIsSearching] = useState(false); + const [locateTrigger, setLocateTrigger] = useState(0); const [isRoutingLoading, setIsRoutingLoading] = useState(false); const [travelMode, setTravelMode] = useState<'driving' | 'bike' | 'foot'>('driving'); const [routes, setRoutes] = useState([]); @@ -1202,6 +1214,9 @@ export const TourDetailPage = ({ {/* Tự động đóng khung Start và End khi dữ liệu thay đổi */} + {/* Xử lý di chuyển tâm bản đồ về phía người dùng */} + + {/* Hiển thị vị trí hiện tại của người dùng */} {userLocation && ( @@ -1386,6 +1401,16 @@ export const TourDetailPage = ({ > + + {/* Nút Tìm tôi */} + {/* Chỉ báo đang tìm đường */}