3dtours/travelplanning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Thêm tính năng hiển thị tooltip trên bong bóng Tour

Browse Source
This commit is contained in:
3dtours
2026-06-16 08:35:48 +07:00
parent 5464d90948
commit b939fc959d
1 changed files with 33 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/ExploreMap.tsx
+33 -22
View File
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents } from 'react-leaflet'; import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents, Tooltip } from 'react-leaflet';
import _MarkerClusterGroup from 'react-leaflet-cluster'; import _MarkerClusterGroup from 'react-leaflet-cluster';
const MarkerClusterGroup = (_MarkerClusterGroup as any).default || _MarkerClusterGroup; const MarkerClusterGroup = (_MarkerClusterGroup as any).default || _MarkerClusterGroup;
import L from 'leaflet'; import L from 'leaflet';
@@ -165,28 +165,39 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: ()
: userPos; : userPos;
return ( return (
<Marker <Marker
key={tour.id} key={tour.id}
position={markerPos} position={markerPos}
eventHandlers={{ eventHandlers={{
click: () => onViewTour(tour.id) click: () => onViewTour(tour.id)
}} }}
icon={L.divIcon({ icon={L.divIcon({
className: 'custom-bubble', className: 'custom-bubble',
html: ` html: `
<div class="relative group"> <div class="relative group">
<div class="w-12 h-12 rounded-full border-4 border-white shadow-lg overflow-hidden transition-transform group-hover:scale-110"> <div class="w-12 h-12 rounded-full border-4 border-white shadow-lg overflow-hidden transition-transform group-hover:scale-110">
<img src="${tourImage}" class="w-full h-full object-cover" onerror="this.src='https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=100'"/> <img src="${tourImage}" class="w-full h-full object-cover" onerror="this.src='https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=100'"/>
</div>
<div class="absolute -bottom-1 -right-1 bg-blue-600 rounded-full w-5 h-5 border-2 border-white flex items-center justify-center text-[10px] font-black text-white">
S
</div>
</div> </div>
`, <div class="absolute -bottom-1 -right-1 bg-blue-600 rounded-full w-5 h-5 border-2 border-white flex items-center justify-center text-[10px] font-black text-white">
iconSize: [48, 48], S
iconAnchor: [24, 24] </div>
})} </div>
/> `,
iconSize: [48, 48],
iconAnchor: [24, 24]
})}
>
<Tooltip direction="top" offset={[0, -20]} opacity={1}>
<div className="p-1 max-w-[180px]">
<div className="font-black text-blue-600 text-[11px] mb-0.5 uppercase tracking-tight truncate">{tour.title}</div>
{tour.description && (
<div className="text-[10px] text-gray-500 line-clamp-2 leading-tight italic">
{tour.description}
</div>
)}
</div>
</Tooltip>
</Marker>
); );
})} })}
</MarkerClusterGroup> </MarkerClusterGroup>