Виджет статической карты

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

подсказка

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

Добавление виджета StaticMap

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

1. Сначала перетащите виджет StaticMap из вкладки Base Elements (в панели виджетов) или добавьте его напрямую из дерева виджетов.
2. Для отображения изображения карты потребуется ключ API Mapbox. Получите ключ API, создав аккаунт Mapbox, а затем вернитесь в FlutterFlow, перейдите в панель свойств, прокрутите вниз до раздела Static Map и введите ключ в поле ввода Mapbox API Key.
3. Чтобы отобразить ваше местоположение на карте, введите значения Latitude и Longitude в поля ввода Lat и Lng.

подсказка

Чтобы получить значения lat long для любого местоположения, откройте Google Maps, щелкните правой кнопкой мыши в любом месте и выберите первый пункт из списка. Это должно выглядеть примерно так: 19.080045795863743, 72.8794235725136.

Настройка

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

Изменение стиля карты

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

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

1. Выберите StaticMap в дереве виджетов или на холсте.
2. Перейдите в панель свойств и прокрутите вниз до раздела Static Map.
3. Найдите свойство Map Style и выберите один из вариантов: Light, Dark, Outdoor, Street, Satellite или Detailed Satellite.

Настройка масштаба, наклона и поворота

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

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

1. Выберите StaticMap в дереве виджетов или на холсте.
2. Перейдите в панель свойств и прокрутите вниз до раздела Static Map.
3. Найдите свойство Map Zoom и установите значение, достаточное для выделения места. Значение начинается с 0 (полное уменьшение). Для увеличения задайте большее значение.
4. Найдите свойство Map Tilt и введите значение, чтобы отобразить карту под углом.
5. Найдите свойство Map Rotation и введите значение, чтобы повернуть карту.

Настройка маркера

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

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

1. Выберите StaticMap в дереве виджетов или на холсте.
2. Перейдите в панель свойств и прокрутите вниз до раздела Static Map.
3. Чтобы показать маркер, найдите свойство Map Marker Color, нажмите на поле рядом с Unset, выберите цвет и затем нажмите Use Color или нажмите на Unset и введите Hex-код напрямую.
4. Чтобы отобразить пользовательское изображение или иконку маркера, введите URL в поле ввода Map Marker URL.

Этот виджет не изменяет размер изображения маркера по ссылке URL. Убедитесь, что вы предоставляете изображение подходящего размера.

Кэширование изображения карты

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

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

1. Выберите StaticMap в дереве виджетов или на холсте.
2. Перейдите в панель свойств и прокрутите вниз до раздела Static Map Image.
3. Найдите переключатель Cache и включите его.

Изменение box fit

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

Чтобы изменить значение box fit:

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