Click vào khám phá địa điểm để di chuyển đến bản đồ
This commit is contained in:
@@ -14,6 +14,7 @@ const App = () => {
|
|||||||
<LandingPage
|
<LandingPage
|
||||||
onContinue={() => setView('explore')}
|
onContinue={() => setView('explore')}
|
||||||
onGoToSignup={() => setView('signup')}
|
onGoToSignup={() => setView('signup')}
|
||||||
|
onGoToMap={() => setView('explore')}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
+13
-1
@@ -1,5 +1,5 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
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 L from 'leaflet';
|
||||||
import 'leaflet/dist/leaflet.css';
|
import 'leaflet/dist/leaflet.css';
|
||||||
import { useTourStore } from './useTourStore';
|
import { useTourStore } from './useTourStore';
|
||||||
@@ -14,6 +14,15 @@ const DefaultIcon = L.icon({
|
|||||||
});
|
});
|
||||||
L.Marker.prototype.options.icon = DefaultIcon;
|
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 }) => {
|
export const ExploreMap = ({ onBack }: { onBack: () => void }) => {
|
||||||
const { publicTours, fetchPublicTours } = useTourStore();
|
const { publicTours, fetchPublicTours } = useTourStore();
|
||||||
const [userPos, setUserPos] = useState<[number, number]>([10.7769, 106.7009]); // Mặc định TP.HCM
|
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='© OpenStreetMap contributors'
|
attribution='© 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) => {
|
{publicTours.map((tour) => {
|
||||||
const place = tour.legs?.[0]?.places?.[0];
|
const place = tour.legs?.[0]?.places?.[0];
|
||||||
if (!place) return null;
|
if (!place) return null;
|
||||||
|
|||||||
+1
-1
@@ -83,7 +83,7 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
|
|||||||
className="flex items-center justify-center gap-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 px-8 rounded-2xl transition-all shadow-lg shadow-indigo-100"
|
className="flex items-center justify-center gap-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 px-8 rounded-2xl transition-all shadow-lg shadow-indigo-100"
|
||||||
>
|
>
|
||||||
<MapIcon className="w-5 h-5" />
|
<MapIcon className="w-5 h-5" />
|
||||||
Xem Bản đồ Công cộng
|
Khám phá các hành trình du lịch
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
|||||||
Reference in New Issue
Block a user