Продолжаю рассказывать, как интегрировать карты в мобильные приложения. Сегодня разберемся, как создать список точек, которые будут отображаться маркерами на карте
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
