Виджет статической карты
Виджет StaticMap отображает изображение карты от mapbox. Этот виджет хороший выбор, когда вам нужно показать местоположение на карте без интерактивности или элементов управления, таких как увеличение, уменьшение и прокрутка карты.
Для отображения карты с интерактивностью или элементами управления используйте виджет GoogleMaps.
Добавление виджета StaticMap
Вот пример того, как вы можете добавить виджет StaticMap в ваш проект:
- Сначала перетащите виджет StaticMap из вкладки Base Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
- Вам понадобится ключ API Mapbox для отображения изображения карты. Получите ключ API, создав учетную запись Mapbox и затем вернитесь к FlutterFlow, перейдите в панель свойств, прокрутите вниз до раздела Static Map и введите ключ в поле ввода Mapbox API Key.
- Чтобы отобразить ваше местоположение на карте, введите значения широты (Latitude) и долготы (Longitude) в поля ввода Lat и Lng.
Для получения значений широты и долготы для любого местоположения откройте Google Maps, щелкните правой кнопкой мыши на любом месте и выберите первый элемент из списка. Он должен иметь вид 19.080045795863743, 72.8794235725136.
Настройка
Вы можете настроить внешний вид и поведение виджета с помощью различных свойств, доступных в разделе панели свойств.
Изменение стиля карты
Изменение стиля карты позволяет изменить общую тему и тип карты, такие как Светлая, Темная, Улицы и Спутник.
Чтобы изменить стиль карты:
- Выберите StaticMap из дерева виджетов или области холста.
- Перейдите в панель свойств и прокрутите вниз до раздела Static Map.
- Найдите свойство Map Style и выберите среди значений Light, Dark, Outdoor, Street, Satellite и Detailed Satellite.
Установка увеличения, наклона и поворота
Вы можете определить уровень увеличения, настроить наклон карты и вращение карты в соответствии с вашими требованиями.
Чтобы задать увеличение, наклон и поворот для карты:
- Выберите StaticMap из дерева виджетов или области холста.
- Перейдите в панель свойств и прокрутите вниз до раздела Static Map.
- Найдите свойство Map Zoom и установите значение, достаточное для выделения места. Значение начинается с 0 (полное уменьшение). Чтобы приблизить, установите более высокое значение.
- Найдите свойство Map Tilt и введите значение, чтобы отобразить карту в наклонном положении.
- Найдите свойство Map Rotation и введите значение для поворота карты.
Настройка маркера
По умолчанию маркер невидим на карте. Вы можете сделать его видимым, установив цвет маркера. Также можно изменить иконку/изображение маркера по ссылке URL.
Чтобы настроить маркер:
- Выберите StaticMap из дерева виджетов или области холста.
- Перейдите в панель свойств и прокрутите вниз до раздела Static Map.
- Чтобы отобразить маркер, найдите свойство Map Marker Color, щелкните на поле рядом с Unset, выберите цвет, затем нажмите Use Color или щелкните на Unset и введите код Hex непосредственно.
- Чтобы отобразить пользовательскую иконку/изображение маркера, введите URL в поле ввода Map Marker URL.
Этот виджет не изменяет размер изображения маркера с помощью ссылки URL. Убедитесь, что предоставляете изображение с соответствующим размером.
Кэширование изображения карты
Включение кэширования сохранит изображение карты и отобразит его, когда интернет недоступен.
Чтобы кэшировать изображение карты:
- Выберите StaticMap из дерева виджетов или области холста.
- Перейдите в панель свойств и прокрутите вниз до раздела Static Map Image.
- Найдите переключатель Cache и включите его.
Изменение типа подгонки
Изменение значения подгонки позволяет контролировать, как карта должна отображаться внутри виджета StaticMap. Различные опции по свойству Box Fit помогут вам масштабировать (увеличивать или уменьшать) изображение карты.
Чтобы изменить значение подгонки:
- Выберите StaticMap из дерева виджетов или области холста.
- Перейдите в панель свойств (на правой стороне вашего экрана) и прокрутите вниз до раздела Static Map Image.
- Найдите выпадающий список Box Fit и попробуйте изменить его на другие значения.