Статическая карта

Виджет StaticMap показывает изображение карты из mapbox. Этот виджет является хорошим выбором, когда вы хотите отобразить местоположение на карте без интерактивности или элементов управления, таких как увеличение, уменьшение масштаба и прокрутка карты.

Вот пример того, как вы можете добавить виджет StaticMap в свой проект:

• Сначала перетащите виджет StaticMap с вкладки Базовые элементы (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
• Для рендеринга изображения карты вам понадобится API—ключ Mapbox. Получите API-ключ, создав аккаунт
• Mapbox, а затем вернитесь во FlutterFlow, перейдите на панель свойств, прокрутите вниз до раздела Static Map и введите ключ в поле ввода Mapbox API Key.
• Чтобы отобразить ваше местоположение на карте, введите значения широты и долготы в поля ввода Lat и Lng.

Вы также можете установить местоположение из переменной, такой как локальное состояние, ответ API, документ Firestore и другие. Рассмотрим пример установки местоположения с помощью переменной local state и документа Firestore.

Чтобы установить значение из переменной local state, создайте переменную с типом данных Lat Lng. Для этого найдите инструкцию здесь.

Чтобы установить значение из документа Firestore, убедитесь, что вы можете получить доступ к документу Firestore. Чтобы получить доступ к единому документу Firestore, найдите инструкцию здесь.

Запись/документ должны содержать поле с типом данных Lat Lng. См. пример ниже:

Чтобы задать местоположение из переменной:

• Выберите StaticMap в дереве виджетов или в области холста.
• Перейдите на панель свойств (в правой части экрана) и прокрутите вниз до раздела Static Map.
• Найдите свойство Location и нажмите на Set from Variable. Откроется новая панель.
• Чтобы установить значение из переменной Local State.
  • Установите для параметра Source значение Local State.
  • Установите для параметра Доступные параметры имя переменной.
• Чтобы установить значение из документа Firestore.
  • Найдите выпадающий список Source, нажмите на Unset и выберите [collection] Record (from PageName).
  • В разделе Доступные параметры нажмите на Снять и выберите поле, содержащее значение местоположения для установки на виджете StaticMap.
• Нажмите кнопку Подтвердить.

Вы можете настроить внешний вид и поведение виджета с помощью различных свойств, доступных на панели свойств.

Изменение стиля карты позволяет изменить общую тему и тип карты, например, светлая, темная, улица или спутник.

Чтобы изменить стиль карты, выполните следующие действия:

• Выберите StaticMap в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела Статическая карта.
• Найдите свойство Стиль карты и выберите один из вариантов: Светлый, Темный, Открытый, Улица, Спутник и Подробный спутник.

Вы можете определить уровень масштабирования, настроить наклон карты и повернуть ее в соответствии с вашими требованиями.

Чтобы задать масштаб, наклон и поворот карты, выполните следующие действия:

• Выберите StaticMap в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела Статическая карта.
• Найдите свойство Map Zoom и установите значение, достаточное для выделения места. Значение начинается с 0 (это полное уменьшение масштаба). Чтобы увеличить масштаб, установите большее значение.
• Найдите свойство Наклон карты и введите значение для отображения карты в наклонном положении.
• Найдите свойство Вращение карты и введите значение для поворота карты.

По умолчанию маркер невидим на карте. Вы можете сделать его видимым, установив цвет маркера. Вы также можете изменить значок/изображение маркера по ссылке URL.

Чтобы настроить маркер:

• Выберите StaticMap в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела Static Map.
• Чтобы отобразить маркер, найдите свойство Map Marker Color, нажмите на поле рядом с Unset, выберите цвет, а затем нажмите Use Color или нажмите Unset и введите шестнадцатеричный код напрямую.
• Чтобы отобразить изображение/иконку пользовательского маркера, введите URL—адрес в поле ввода URL—адреса маркера карты.

Включение кэширования позволит хранить изображение карты и отображать его при отсутствии доступа к интернету.

Чтобы сохранить изображение карты в кэше:

• Выберите StaticMap в дереве виджетов или в области холста.
• Перейдите к панели свойств и прокрутите вниз до раздела Статичное изображение карты.
• Найдите переключатель «Кэш» и включите его.

Чтобы изменить высоту и ширину изображения карты:

• Выберите StaticMap в дереве виджетов или в области холста.
• Перейдите к панели свойств (в правой части экрана) и прокрутите вниз до раздела Static Map Image.
• Найдите параметры Ширина и Высота.
• Есть три способа задать размеры:
  • Чтобы задать точный размер, выберите PX и введите нужные значения.
  • Чтобы задать размеры в % от размера экрана, выберите % и введите нужное значение.
  • Чтобы сделать высоту или ширину изображения равной высоте или ширине экрана, нажмите на значок бесконечности ().

Изменение border-radius позволяет создавать закругленные углы для изображения карты.

Вот пример того, как создать закругленные углы:

• Выберите StaticMap в дереве виджетов или в области холста.
• Перейдите к панели свойств (в правой части экрана) и прокрутите вниз до раздела Static Map Image.
• Найдите свойство Радиус границы и введите значение 50. По умолчанию значение 50 будет установлено для всех углов, а именно TL (верхний левый), TR (верхний правый), BL (нижний левый) и BR (нижний правый).
• Нажмите на значок замка (), чтобы изменить каждый угол отдельно.

Изменение значения box fit позволяет вам контролировать отображение карты внутри виджета StaticMap. Различные опции свойства Box Fit помогают масштабировать (увеличивать или уменьшать в размерах) изображение карты.

Чтобы изменить значение подгонки блока, выполните следующие действия:

• Выберите StaticMap в дереве виджетов или в области холста.
• Перейдите на панель свойств (в правой части экрана) и прокрутите вниз до раздела Static Map Image.
• Найдите выпадающий параметр Box Fit и попробуйте изменить его на другие значения.

Посмотрите, как установить цвет из переменной в любое свойство цвета этого виджета.

Инструкции по отображению/скрытию виджета находятся здесь.