Привет, это Анна, Team Lead Flutter-команды Friflex

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

Используем класс PlacemarkMapObject. Он принимает разные параметры, которые помогают создать уникальный дизайн маркера и настроить нужные пользовательские взаимодействия:

🔴 icon принимает экземпляр PlacemarkIcon, который позволяет создавать простые и составные иконки
🔴 text дает возможность отображать кастомный текст на маркере
🔴 onTap и onDrag задают взаимодействия с маркером

Создадим список точек Point, которые необходимо отобразить маркерами на карте:

List<Point> get points {
  return const [
    Point(latitude: 55.755864, longitude: 37.617698),
    Point(latitude: 51.507351, longitude: -0.127696),
    Point(latitude: 41.887064, longitude: 12.504809),
  ];
}

Для каждой отдельной точки создаем экземпляр маркера PlacemarkMapObject.

List<PlacemarkMapObject> get mapObjects => List.generate(
      points.length,
      (index) => PlacemarkMapObject(
        mapId: MapObjectId('MapObject $index'),
        point: points[index],
        opacity: 1,
        text: PlacemarkText(
          text: '$index',
          style: const PlacemarkTextStyle(size: 14, color: Colors.white),
        ),
        icon: PlacemarkIcon.single(
          PlacemarkIconStyle(
            image: BitmapDescriptor.fromAssetImage('assets/icons/map_point.png'),
            scale: 2,
          ),
        ),
        onTap: (mapObject, point) {
          // действие при нажатии на маркер
        },
        onDrag: (mapObject, point) {
          // действие при перетягивании маркера
        },
      ),
    );

Список объектов готов. В следующий раз расскажу, как отобразить их на карте.

#howtoflutter