Как сделать Google Maps JavaScript API Zoom in Incress/Out Process более плавным? ⇐ Javascript

[Anonymous]

Я использую API Google Maps JavaScript с множеством маркеров SVG, сгруппированных с использованием MarkerClusterer. Когда я увеличиваю и выходу, карта чувствует себя отставающей, а анимация масштабирования не является гладкой - она заикается или замораживает на мгновение. Я уже использую оптимизированные значки SVG, кластеризацию маркеров с набором Maxzoom и пытаюсь ограничить рендеринг маркера. < /P>
async function loadMarkers(map, bs, dv, state) {

const bounds = new google.maps.LatLngBounds();

const markersBS = bs.map(item => {
const isDown = item.status === 'KO';
const position = new google.maps.LatLng(item.lat, item.long);
const iconUrl = isDown ? '/wifi-red.svg' : '/wifi-green.svg';

const marker = new google.maps.Marker({
position,
icon: {
url: iconUrl,
scaledSize: new google.maps.Size(36, 36),
anchor: new google.maps.Point(18, 36),
},
title: item.bs,
});
marker.isDown = isDown;
bounds.extend(position);
return marker;
});

const markersDV = dv.map(item => {
const isOffline = item.status === 'Offline';
const position = new google.maps.LatLng(item.lat, item.long);
const iconUrl = isOffline ? '/pin-black.svg' : '/pin-green.svg';

const marker = new google.maps.Marker({
position,
icon: {
url: iconUrl,
scaledSize: new google.maps.Size(36, 36),
anchor: new google.maps.Point(18, 36),
},
title: item.dv,
});
marker.isOffline = isOffline;
bounds.extend(position);
return marker;
});

const markerClusterBS = new MarkerClusterer({
map,
markers: markersBS,
maxZoom: 15,
renderer: {
render: ({ count, markers, position }) => {
const hasDown = markers.some(marker => marker.isDown);
return new google.maps.Marker({
position,
label: {
text: String(count),
color: 'white',
fontSize: '12px',
//fontWeight: 'bold',
},
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 15,
fillColor: 'purple',
fillOpacity: 1,
strokeColor: hasDown ? 'red' : 'purple',
strokeWeight: 4,
},
zIndex: google.maps.Marker.MAX_ZINDEX + count,
});
},
}
});

const markerClusterDV = new MarkerClusterer({
map,
markers: markersDV,
maxZoom: 15,
renderer: {
render: ({ count, markers, position }) => {
const hasOffline = markers.some(marker => marker.isOffline);
return new google.maps.Marker({
position,
label: {
text: String(count),
color: 'white',
fontSize: '12px',
//fontWeight: 'bold',
},
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 15,
fillColor: 'blue',
fillOpacity: 1,
strokeColor: hasOffline ? 'red' : 'blue',
strokeWeight: 4,
},
zIndex: google.maps.Marker.MAX_ZINDEX + count,
});
},
}
});

map.fitBounds(bounds);

google.maps.event.addListenerOnce(map, "idle", () => {
const currentZoom = map.getZoom();
map.setOptions({ minZoom: currentZoom }); // Set the map's minimum zoom level
});

google.maps.event.addListener(map, 'dragstart', () => {
markerClusterBS.clearMarkers();
markerClusterDV.clearMarkers();
});

google.maps.event.addListener(map, 'dragend', () => {
const bounds = map.getBounds();
if (!bounds) return;

const visibleMarkersBS = markersBS.filter(marker =>
bounds.contains(marker.getPosition())
);
const visibleMarkersDV = markersDV.filter(marker =>
bounds.contains(marker.getPosition())
);

markerClusterBS.addMarkers(visibleMarkersBS);
markerClusterDV.addMarkers(visibleMarkersDV);
});
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... s-smoother