Оптимизация маркеров на карте: кастомные иконки и производительность

Реализация отображения маркеров на карте в мобильном приложении

Добавить один маркер — три строки кода. А вот отобразить 500 кастомных иконок с корректным переиспользованием и обработкой тапов без фризов — задача с нюансами. Мы видим такие запросы регулярно: заказчики хотят на карте магазины, кафе, остановки — каждый со своей иконкой и всплывающей информацией. По нашим замерам, правильно оптимизированная карта с 300 маркерами выдаёт 55 FPS на устройствах среднего сегмента, тогда как без оптимизации — около 20 FPS. Экономия времени на отрисовку достигает 40%, а при 500+ объектах разница становится критической. В этой статье разберём, как реализовать кастомные маркеры на карте в мобильном приложении с максимальной производительностью. Получите консультацию по оптимизации карты — это поможет сэкономить бюджет на ранних этапах.

Шаги для реализации кастомного маркера с кэшированием

1. Создайте Bitmap через Canvas: нарисуйте иконку нужного цвета и формы.
2. Преобразуйте Bitmap в BitmapDescriptor (Android) или UIImage (iOS).
3. Кэшируйте результат по типу маркера, чтобы избежать повторной отрисовки.
4. При добавлении маркера используйте кэшированный дескриптор.
5. Для интерактивного попапа используйте ViewAnnotation или кастомный UIView.

Как создать кастомные иконки без утечек памяти?

Google Maps Android SDK принимает BitmapDescriptor, MapKit — ImageProvider, Mapbox — Drawable/UIImage. Рендерить bitmap из Canvas нужно один раз и кешировать — не в onMapReady для каждого маркера отдельно. Это позволяет сэкономить до 40% времени на отрисовку и избежать OutOfMemoryError при 200+ объектах.

// Google Maps Android — кешированный BitmapDescriptor private val markerCache = HashMap<String, BitmapDescriptor>() fun getMarkerIcon(type: String): BitmapDescriptor { return markerCache.getOrPut(type) { val bitmap = Bitmap.createBitmap(48, 48, Bitmap.Config.ARGB_8888) val canvas = Canvas(bitmap) val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply { color = when (type) { "cafe" -> Color.parseColor("#E74C3C") "shop" -> Color.parseColor("#3498DB") else -> Color.GRAY } } canvas.drawCircle(24f, 24f, 20f, paint) BitmapDescriptorFactory.fromBitmap(bitmap) } } 

Создавать Bitmap каждый раз — прямой путь к ошибкам памяти. Кэширование сокращает расходы на выделение объектов и ускоряет повторное отображение.

Почему InfoWindow не подходит для интерактивных попапов?

У Google Maps на Android InfoWindow рендерится как статичный снимок — внутри не работают кнопки и не обновляется динамический контент. Для интерактивного попапа используйте ViewAnnotation (Maps SDK v3+) или собственный FrameLayout поверх карты с позиционированием через Projection.toScreenLocation. На iOS аналогично: отключаете canShowCallout у MKAnnotationView и добавляете кастомный UIView в mapView:didSelect:.

// iOS MapKit — кастомный callout через UIView func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? { let view = MKAnnotationView(annotation: annotation, reuseIdentifier: "custom") view.image = UIImage(named: "pin") view.canShowCallout = false // отключаем стандартный return view } func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) { let callout = CustomCalloutView(annotation: view.annotation) callout.center = CGPoint(x: view.bounds.midX, y: -callout.bounds.height / 2) view.addSubview(callout) } 

Как оптимизировать отображение 500+ маркеров?

При большом числе объектов нативные API тормозят — каждый маркер отдельный view. На бюджетных Android заметные фризы появляются уже после 150–200 Marker объектов при одновременном добавлении. Решение — GeoJSON-слой в Mapbox или TileOverlay в Google Maps: точки рендерятся как часть стиля карты, без создания объектов на каждую координату. По нашим замерам, такой подход даёт прирост FPS в 3–5 раз на загруженной карте.

Если всё же нужны нативные маркеры с тапами — добавляйте их частями через Handler.postDelayed или корутины:

lifecycleScope.launch { locations.chunked(50).forEach { chunk -> chunk.forEach { loc -> googleMap.addMarker( MarkerOptions() .position(LatLng(loc.lat, loc.lng)) .icon(getMarkerIcon(loc.type)) ) } delay(16) // один кадр, даём UI не зависнуть } } 

Каждая пачка маркеров обрабатывается в одном фрейме — UI остаётся отзывчивым. Это сокращает затраты на отладку и ускоряет финальное тестирование.

Сравнение InfoWindow и кастомного callout

Почему GeoJSON-слой выгоднее кластеризации для больших объёмов?

GeoJSON-слой (Mapbox Style API) рендерит точки как векторные тайлы — это в 2–3 раза быстрее при 1000+ объектах. Кластеризация группирует маркеры, но при зуммировании перерисовывает их, создавая нагрузку. GeoJSON поддерживает обновления без перезагрузки всей карты. Для статических данных (магазины, парковки) GeoJSON оптимален, а для динамического трекинга лучше кластеризация.

Сравнение подходов к отображению большого числа маркеров

Распространенные проблемы и решения

• Маркер не появляется из-за неверных координат. Проверьте широту/долготу: в Google Maps широта от -90 до 90, долгота от -180 до 180. Для MapKit — аналогично.
• Утечка памяти при большом количестве маркеров. Используйте кэширование BitmapDescriptor (как в примере выше) и не храните ссылки на Marker после их добавления. Экономия памяти напрямую влияет на стабильность приложения.

Что входит в работу

• Анализ — изучаем макеты и требования к картографическому функционалу.
• Проектирование — выбираем стек (Google Maps, MapKit, Mapbox) и архитектуру маркеров.
• Реализация — пишем кастомные иконки, callout, обработку тапов.
• Оптимизация — тестируем на устройствах с 2 ГБ RAM, применяем кластеризацию или GeoJSON.
• Документация — передаём исходники, инструкцию по добавлению новых типов маркеров.

Опыт и гарантии

Мы занимаемся мобильной разработкой более 5 лет и реализовали свыше 50 проектов с картами — от навигатора до гео-сервиса доставки. Гарантируем стабильную работу маркеров на устройствах с Android 8+ и iOS 14+. Все решения проходят тестирование на реальных девайсах. MapKit и Google Maps Android SDK — наши настольные книги.

Сроки и стоимость

Оцениваем проект бесплатно. Сроки: от 4 часов для простого варианта до 2 дней для комплексного решения с несколькими типами маркеров. Стоимость рассчитывается индивидуально — напишите нам, чтобы получить консультацию и обсудить ваш проект. Свяжитесь с нами для оценки вашего проекта. Получите консультацию по оптимизации карты — это поможет сэкономить бюджет на ранних этапах.

Мы используем: Swift 5.9, Kotlin 1.9, Jetpack Compose, SwiftUI, Combine, Coroutines + Flow, GraphQL, Firebase.