Click vào khám phá địa điểm để di chuyển đến bản đồ

ExploreMap.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import { useTourStore } from './useTourStore';
@@ -14,6 +14,15 @@ const DefaultIcon = L.icon({
 });
 L.Marker.prototype.options.icon = DefaultIcon;
 
+// Component Helper để cập nhật tâm bản đồ khi vị trí người dùng thay đổi
+function RecenterMap({ position }: { position: [number, number] }) {
+  const map = useMap();
+  useEffect(() => {
+    map.setView(position, map.getZoom());
+  }, [position, map]);
+  return null;
+}
+
 export const ExploreMap = ({ onBack }: { onBack: () => void }) => {
   const { publicTours, fetchPublicTours } = useTourStore();
   const [userPos, setUserPos] = useState<[number, number]>([10.7769, 106.7009]); // Mặc định TP.HCM
@@ -50,6 +59,9 @@ export const ExploreMap = ({ onBack }: { onBack: () => void }) => {
           attribution='&copy; OpenStreetMap contributors'
         />
         
+        {/* Tự động di chuyển bản đồ đến vị trí người dùng khi tìm thấy tọa độ */}
+        <RecenterMap position={userPos} />
+        
         {publicTours.map((tour) => {
           const place = tour.legs?.[0]?.places?.[0];
           if (!place) return null;