admin/39032-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Edit app-9xzmfic2e4g1/src/components/trip/Map.tsx via Editor

Browse Source
This commit is contained in:
Flatlogic Bot 2026-03-05 15:19:34 +00:00
parent 70b732623d
commit 79212cbccd
1 changed files with 91 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
app-9xzmfic2e4g1/src/components/trip/Map.tsx
View File

@ -73,23 +73,70 @@ export function TripMap({ itinerary, activePlaceId, onMarkerClick, onAddPlace }:
setAdded(false); setAdded(false);
}, [itineraryKey]); }, [itineraryKey]);
// ── Fetch rich details ──────────────────────────────────────────────────── // ── Fetch rich details via Google Places API ─────────────────────────────
const fetchPlaceDetail = useCallback(async (poi: SelectedPOI) => { const fetchPlaceDetail = useCallback((poi: SelectedPOI) => {
if (!placesServiceRef.current) return;
setDetailLoading(true); setDetailLoading(true);
setPlaceDetail(null); setPlaceDetail(null);
setActiveTab('about'); setActiveTab('about');
try {
const data = await api.getPlaceDetails({ placesServiceRef.current.getDetails(
place_id: poi.place_id, {
name: poi.name, placeId: poi.place_id,
category: poi.category, fields: [
}); 'place_id', 'name', 'editorial_summary', 'rating', 'user_ratings_total',
setPlaceDetail(data); 'opening_hours', 'reviews', 'types', 'formatted_address',
} catch (e) { ],
console.error('Place detail fetch error:', e); },
} finally { (place, status) => {
setDetailLoading(false); setDetailLoading(false);
} if (status !== google.maps.places.PlacesServiceStatus.OK || !place) return;
// Build why_visit from types + editorial_summary
const typeLabels: Record<string, string> = {
tourist_attraction: 'Turistik bir cazibe noktası — ziyaret değer.',
museum: 'Tarihi ve kültürel bir müze deneyimi sunar.',
restaurant: 'Yerel lezzetleri keşfetmek için harika bir mekan.',
park: 'Doğayla iç içe dinlenme ve yürüyüş imkânı.',
lodging: 'Konforlu konaklama seçeneği.',
natural_feature: 'Eşsiz doğal güzelliğiyle öne çıkan bir yer.',
church: 'Tarihi ve mimari açıdan ilgi çekici bir yapı.',
mosque: 'Tarihi ve mimari açıdan ilgi çekici bir yapı.',
point_of_interest: 'Bölgenin önemli ilgi noktalarından biri.',
};
const whyVisit: string[] = [];
if (place.editorial_summary?.overview) whyVisit.push(place.editorial_summary.overview);
for (const t of (place.types || [])) {
const label = typeLabels[t];
if (label && !whyVisit.includes(label)) { whyVisit.push(label); break; }
}
// Build tips from top-rated reviews
const tips: string[] = (place.reviews || [])
.filter(r => r.rating >= 4 && r.text?.length > 30)
.slice(0, 2)
.map(r => `"${r.text.slice(0, 120).trim()}…"`);
const detail: PlaceDetail = {
place_id: place.place_id || poi.place_id,
name: place.name || poi.name,
summary: place.editorial_summary?.overview || '',
rating: place.rating,
total_ratings: place.user_ratings_total,
is_open_now: place.opening_hours?.isOpen?.() ?? null,
opening_hours: place.opening_hours?.weekday_text || null,
why_visit: whyVisit,
tips,
reviews: (place.reviews || []).map(r => ({
author: r.author_name,
rating: r.rating,
text: r.text,
time: r.relative_time_description,
})),
};
setPlaceDetail(detail);
}
);
}, []); }, []);
// ── Handle add ──────────────────────────────────────────────────────────── // ── Handle add ────────────────────────────────────────────────────────────
@ -147,43 +194,41 @@ export function TripMap({ itinerary, activePlaceId, onMarkerClick, onAddPlace }:
placesServiceRef.current = new google.maps.places.PlacesService(map); placesServiceRef.current = new google.maps.places.PlacesService(map);
// ── POI tıklama ─────────────────────────────────────────────────── // ── POI tıklama ───────────────────────────────────────────────────
if (onAddPlace) { // POI tiklama - her zaman calisir, detay panelini acar
map.addListener('click', (e: google.maps.MapMouseEvent & { placeId?: string }) => { map.addListener('click', (e: google.maps.MapMouseEvent & { placeId?: string }) => {
if (!e.placeId) return; if (!e.placeId) return;
e.stop?.(); e.stop?.();
const placeId = e.placeId; const placeId = e.placeId;
setAdded(false); setAdded(false);
// Önce temel bilgiyi Google'dan çek, sonra panel aç placesServiceRef.current?.getDetails(
placesServiceRef.current?.getDetails( {
{ placeId,
placeId, fields: ['place_id', 'name', 'formatted_address', 'geometry', 'rating', 'photos', 'types'],
fields: ['place_id', 'name', 'formatted_address', 'geometry', 'rating', 'photos', 'types'], },
}, (place, status) => {
(place, status) => { if (status !== google.maps.places.PlacesServiceStatus.OK || !place?.geometry?.location) return;
if (status !== google.maps.places.PlacesServiceStatus.OK || !place?.geometry?.location) return;
const photoUrl = place.photos?.[0]?.getUrl({ maxWidth: 600 }) || ''; const photoUrl = place.photos?.[0]?.getUrl({ maxWidth: 600 }) || '';
const category = (place.types?.[0] || 'point_of_interest').replace(/_/g, ' '); const category = (place.types?.[0] || 'point_of_interest').replace(/_/g, ' ');
const poi: SelectedPOI = { const poi: SelectedPOI = {
place_id: place.place_id || placeId, place_id: place.place_id || placeId,
name: place.name || '', name: place.name || '',
lat: place.geometry.location.lat(), lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(), lng: place.geometry.location.lng(),
photoUrl, photoUrl,
category, category,
formatted_address: place.formatted_address || '', formatted_address: place.formatted_address || '',
rating: place.rating, rating: place.rating,
}; };
setSelectedPOI(poi); setSelectedPOI(poi);
fetchPlaceDetail(poi); fetchPlaceDetail(poi);
} }
); );
}); });
}
setGoogleMap(map); setGoogleMap(map);
} }