Карты Google – это мощный инструмент, позволяющий разработчикам интегрировать интерактивные карты в свои приложения Flutter. Одной из ключевых особенностей Карт Google является возможность настройки маркеров — значков, используемых для обозначения определенных мест на карте. В этой статье блога мы рассмотрим различные методы создания и настройки маркеров в Картах Google с помощью Flutter.

Метод 1: использование значков маркеров по умолчанию
Самый простой способ добавить маркеры на карту Google во Flutter — использовать значки маркеров по умолчанию, предоставляемые API Карт Google. Вот пример:

Marker(
  markerId: MarkerId("marker_1"),
  position: LatLng(37.7749, -122.4194),
  icon: BitmapDescriptor.defaultMarker, // Using default marker icon
  onTap: () {
    // Handle marker tap event
  },
),

Метод 2: настройка значков маркеров
Если вы хотите создать собственные значки маркеров, Flutter предоставляет метод BitmapDescriptor.fromAssetдля загрузки пользовательских изображений. Вот пример:

Marker(
  markerId: MarkerId("marker_2"),
  position: LatLng(37.7749, -122.4194),
  icon: BitmapDescriptor.fromAsset("assets/custom_marker.png"),
  onTap: () {
    // Handle marker tap event
  },
),

Метод 3: использование пользовательских маркеров виджетов
Помимо значков изображений, вы также можете использовать пользовательские виджеты Flutter в качестве маркеров. Это дает вам больше гибкости с точки зрения дизайна и интерактивности. Вот пример:

Marker(
  markerId: MarkerId("marker_3"),
  position: LatLng(37.7749, -122.4194),
  icon: BitmapDescriptor.fromBytes(
    Uint8List.fromList(await getBytesFromCanvas(CustomMarkerWidget())),
  ),
  onTap: () {
    // Handle marker tap event
  },
),

Метод 4: кластеризация маркеров
При работе с большим количеством маркеров часто необходимо сгруппировать их для повышения производительности и читаемости. Пакет flutter_map_marker_clusterпредоставляет простой способ добиться этого. Вот пример:

MarkerClusterLayerOptions(
  maxClusterRadius: 120,
  disableClusteringAtZoom: 15,
  size: Size(40, 40),
  fitBoundsOptions: FitBoundsOptions(padding: EdgeInsets.all(50)),
  markers: markers,
  polygonOptions: PolygonOptions(
    borderColor: Colors.blueAccent,
    color: Colors.black12,
    borderStrokeWidth: 3,
  ),
  builder: (context, markers) {
    return CustomClusterMarkerWidget(markers.length);
  },
),