Библиотека шарписта | C#, F#, .NET, ASP.NET: “🗺 Группировка меток в картах MAUI Если на карте десятки или сотни мет…”

🗺 Группировка меток в картах MAUI

Если на карте десятки или сотни меток, они сливаются в непроходимую кашу. В .NET MAUI 11 Preview 3 появилась кластеризация меток из коробки на Android и iOS/Mac Catalyst.

Как включить

Одно свойство:

<maps:Map IsClusteringEnabled="True" />

Ближайшие метки автоматически группируются в кластер с числом внутри. При увеличении масштаба кластер раскрывается до отдельных пинов.

Разные группы кластеров

Если нужно, чтобы кофейни кластеризовались отдельно от парков, используем ClusteringIdentifier на Pin:

map.Pins.Add(new Pin
{
    Label = "Pike Place Coffee",
    Location = new Location(47.6097, -122.3331),
    ClusteringIdentifier = "coffee"
});

map.Pins.Add(new Pin
{
    Label = "Occidental Square",
    Location = new Location(47.6064, -122.3325),
    ClusteringIdentifier = "parks"
});

Пины с одинаковым идентификатором группируются вместе. С разными — образуют независимые кластеры, даже если географически рядом. Пины без идентификатора попадают в общую группу по умолчанию.

Обработка нажатия на кластер

При тапе на кластер срабатывает событие ClusterClicked:

map.ClusterClicked += async (sender, e) =>
{
    string names = string.Join("\n", e.Pins.Select(p => p.Label));
    await DisplayAlert(
        $"Кластер ({e.Pins.Count} меток)",
        names,
        "OK");

    // Отменить стандартное приближение к кластеру:
    // e.Handled = true;
};

В ClusterClickedEventArgs три поля:

• Pins — список пинов в кластере
• Location — географический центр
• Handled — если true, стандартное поведение (зум к кластеру) отменяется.

Платформенные детали

На Android кластеризация работает через собственный алгоритм на основе сетки, пересчитывается при смене масштаба. Сторонние зависимости не нужны.

На iOS и Mac Catalyst используется нативный MKClusterAnnotation из MapKit — анимации и поведение платформенные.

Пример с кластеризацией уже есть в репозитории, страница Clustering в проекте MapDemo.

➡️ Блог разработчиков

📍 Навигация: Вакансии • Задачи • Собесы

🐸 Библиотека шарписта

#il_люминатор