我从后端接收带有位置的数据,然后将它们显示在地图上。我怎样才能做到,在地图上,根据缩放,标记的数量发生变化,当你靠近时,标记的数量会增加?
<GoogleMap zoom={zoom} center={center} mapContainerClassName="map-container"
options={{
restriction: {
latLngBounds: azerbaijanBounds,
strictBounds: false,
},
}}
>
{counter && data && data.map((loc) => (
<div key={loc.id} className="custom-marker-wrapper">
<Marker
position={{ lat: loc.location[0], lng: loc.location[1] }}
onClick={() => handleMarkerClick(loc)}
icon={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAq1BMVEUAAABl1o5m2Y1l141l141l141l141k2I5l141l141l1oxl141o2Ihl141l141m1406aqo/bahj14tl141l145k1o08bKk9bKk8a6lk141l141o3Is7bKc9a6k9bKk9a6k+ZaZXpptl2I48bKg9bKo/b6g9bKk8bKk8bKlk14w9a6k9bKk7bKw9bKlm1o09bKk9bKk+bKo9bao9bKg8bKc9bao9bKk9bKg5capaHh7zAAAAOXRSTlMAUQqs/ybVT/TMg58QtPlnMCst3OQ4ZPVZWMAWDaP/lwgEj9fKIPzsTjNFiRrAfdyCrD/dQLDQbRKMyS9lAAABDUlEQVR4Ac3PVWLDMBAE0IkzYWbeMDPa9z9ZV2qYforPbGkJ387nwzuOn/Q7eCkQpAoG8EIoTEYiZDiEp6IkY44TIxnFo3iCTKaQziCVJBNx3MnmyHwBxVKpjEKezGVxoxImq7V6Q1SzVauS4Qou2h2SnXamK1avf/yBo2NAsaSLg4HehqNjSlhjW7Jl03fTk6Goads2NYYRNE1/pm/Ugdlc1HxmxgrCiIUXKJv0pSKM9lTUcIJFOAar3WqKWqZxNBqablbtNo7SotZ1nPV7oja43jDHtdZWf+1uNuzt/7SCcXi+oS+q9X83zG83LB82yKpcLruiymoqDxseXW1oDeWJkoez3Xr+YD/BL/kATPEwwGzXEGUAAAAASUVORK5CYII='}
>
{loc.isOpen && loc.title && (
<InfoWindowF onCloseClick={() => handleMarkerClose(loc)}>
<div className='infoWindowDiv' onClick={(e) => { window.open(`https://example.com/item/${offerType}/${loc.id}`) }}>
<span className='infoWindowTitle'>{loc.title}</span>
<span className='infoWindowInfo'>Qiymet - <span className='infoWindowPrice'>{loc.price} AZN</span></span>
<span className='infoWindowInfo'>Sahə - <span className='infoWindowPrice'>{loc.area} m <sup><small>2</small></sup></span></span>
<span className='infoWindowInfo'>1kv/qiymet - <span className='infoWindowPrice'>{Math.round(loc.m2)} AZN</span></span>
</div>
</InfoWindowF>
)}
</Marker>
</div>
))}
</GoogleMap >
我尝试添加类名以便根据距离更改显示值,但它不起作用
我只是相对于一个点进行排序,然后根据缩放来更改状态
const groupMarkers = ((locations, zoom) => {
const groupingThreshold = 0.5 / Math.pow(2, zoom / 2);
const groupedMarkers = [];
const sortByLocation = (properties, lat, lng) => {
return properties?.sort((a, b) => {
const distanceA = calculateDistance(a.location[0], a.location[1], lat, lng);
const distanceB = calculateDistance(b.location[0], b.location[1], lat, lng);
return distanceA - distanceB;
});
}
const calculateDistance = (lat1, lng1, lat2, lng2) => {
const earthRadius = 6371;
const radLat1 = (Math.PI * lat1) / 180;
const radLat2 = (Math.PI * lat2) / 180;
const deltaLat = (Math.PI * (lat2 - lat1)) / 180;
const deltaLng = (Math.PI * (lng2 - lng1)) / 180;
const a = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.sin(deltaLng / 2) * Math.sin(deltaLng / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance = earthRadius * c;
return distance;
}
const sortedProperties = sortByLocation(locations, 40.317574, 50.339039);
for (let i = 0; i < sortedProperties?.length - 1; i++) {
if ((Math.abs(sortedProperties[i].location[0] - sortedProperties[i + 1].location[0])) > groupingThreshold && (Math.abs(sortedProperties[i].location[1] - sortedProperties[i + 1].location[1])) > groupingThreshold) {
groupedMarkers.push(sortedProperties[i]);
}
}
setData2(groupedMarkers)
})