Юрий Петров | Flutter

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

Сегодня открываю месяц навигации на этом канале — весь октябрь вместе с коллегами буду делиться опытом интеграции карт в мобильные приложения. Начну с Яндекс Карт.

Чтобы подключить Яндекс Карты к приложению на Flutter, установим плагин yandex_mapkit. Это можно сделать в три шага:

Шаг 1. Подготавливаем и добавляем зависимости в pubspec.yaml


  flutter:
    sdk: flutter
  yandex_mapkit: ^4.1.0

Выполняем команду flutter pub get

Шаг 2. Настраиваем Yandex MapKit на Android

1. Открываем файл android/build.gradle и указываем вариант нативной библиотеки full/lite:

yandexMapkit.variant=<YOUR_DESIRED_VARIANT>

2. В файле MainApplication.java или MainApplication.kt указываем локализацию и ключ API:


MapKitFactory.setLocale("YOUR_LOCALE");
MapKitFactory.setApiKey("YOUR_API_KEY");

3. В файле AndroidManifest.xml указываем разрешения:


<uses-permission android:name="android.permission.INTERNET"/>
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Шаг 3. Настраиваем Yandex MapKit на iOS

1. Открываем файл AppDelegate.swift и указываем локализацию и API ключ:


YMKMapKit.setApiKey("YOUR_API_KEY")

2. В файле Podfile раскомментируем строку platform :ios, '12.0' и здесь же добавляем конфигурацию нативной библиотеки full/lite:


ENV['YANDEX_MAPKIT_VARIANT'] = '<YOUR_DESIRED_VARIANT>'

Готово, все зависимости настроены. Можно начинать писать код для отображения карты, но об этом я расскажу в следующий раз 🤞

#howtoflutter

👍7🙏1

537 views10:12

Юрий Петров | Flutter

Forwarded from Flutter Friendly

Привет, это Анна, 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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍4🙏2🔥1

559 views11:22

About

Blog

Apps

Platform