Google карта

Виджет GoogleMap можно использовать для многих целей, например, для поиска ближайших мест (ресторанов, заправок и т.д.), поиска направления к пункту назначения, определения трафика на маршруте, маршрутов, удобных для велосипедистов, спутниковых снимков и т.д.

Чтобы добавить виджет GoogleMap в ваш проект:

Просто перетащите виджет GoogleMap с вкладки Базовые элементы (в панели виджетов) или добавьте его непосредственно из дерева виджетов.

Когда пользователи открывают карту, она должна сначала показывать какое-то местоположение. Настройка начального местоположения позволяет пользователям при открытии карты видеть ее с определенным местоположением или текущим местоположением пользователя.

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

• Выберите GoogleMap в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до пункта Исходное местоположение.
• Введите значения в свойствах Lat и Lng.

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

• Выберите виджет GoogleMap, перейдите на панель свойств, найдите свойство Initial Location и нажмите Set from Variable.
• Установите Источник в Глобальные свойства > Текущее местоположение устройства.
• Нажмите Подтвердить.

Маркер — это значок, который появляется на карте, указывая местоположение.

Чтобы добавить маркеры:

• Выберите виджет GoogleMap, перейдите на панель свойств, прокрутите вниз до выпадающего списка Num Markers и выберите, какие маркеры вы хотите показывать: одиночные или множественные.
• Установите для Marker Type значение Document, если данные находятся в Firestore Collection; в противном случае установите значение LatLng, чтобы загрузить их из списка типа <Lat Lng>.
  • Если вы выбрали значение Документ, создайте коллекцию и запросите ее на любом виджете (он должен быть родителем GoogleMap) или странице.
  • В документе Маркер нажмите кнопку Установить из переменной.
  • Выберите Источник как [имя_коллекции] Документ и Доступные параметры для поля, содержащего данные о местоположении.
  • Нажмите кнопку Подтвердить.

• Если вы выбрали LatLng, в Marker LatLngs нажмите Set from Variable.
• Теперь необходимо предоставить источник, содержащий список местоположений в качестве Data Type <Lat Lng> (например, Local State > [variable_name] (List <Lat Lng>)).
• Нажмите кнопку Подтвердить.

Чтобы изменить цвет маркера:

• Выберите GoogleMap в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз, чтобы найти свойство Marker Color.
• Измените выпадающее значение Marker Color на цвет, который вам нравится.

Чтобы центрировать карту по маркеру, коснитесь его:

• Выберите GoogleMap в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз, чтобы найти свойство Centering Map on Marker Tap.
• Установите флажок Centering Map on Marker Tap, чтобы включить его.

Ваши пользователи могут захотеть увидеть больше подробностей, когда они нажимают на маркер. Один из способов — открыть нижний лист для отображения дополнительной информации.

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

1. Создайте нижний лист, используя приведенную здесь инструкцию, и разработайте макет для отображения данных маркера, таких как имя.
2. После создания компонента Bottom Sheet выберите компонент в дереве виджетов.
3. Нажмите на значок Определить параметр
4. Нажмите на + Добавить параметр, введите имя параметра и установите Тип на Запись. Установка параметра Тип на Запись позволяет принимать один документ пожарного магазина.
5. Установите Тип записи на коллекцию Firestore, в которой хранятся данные маркера.
6. Нажмите кнопку Сохранить.

Чтобы показать информацию о маркерах в макете нижнего листа:

1. Выберите виджет Текст, перейдите на панель свойств и нажмите Установить из переменной.
2. Чтобы отобразить данные из параметра, выберите Источник в качестве имени параметра (в котором находится документ) и Свойства документа для поля, которое вы хотите показать.
3. При желании вы также можете установить значение переменной по умолчанию.
4. Нажмите кнопку Подтвердить.

Чтобы добавить действие для открытия нижнего листа с данными маркера:

1. Выберите GoogleMap в дереве виджетов или в области холста.
2. Добавьте действие, используя инструкции, приведенные здесь.
3. Держите вкладку Действие открытой, прокрутите вниз и нажмите на + Передать параметр. Это позволит автоматически выбрать коллекцию, в которой хранятся данные маркера.
4. Нажмите на имя коллекции, прокрутите вниз, чтобы найти выпадающий список Источник, и установите его на Запись маркера.

Наконец, вот как можно увидеть данные маркера в нижнем листе:

Различные свойства на панели свойств можно использовать для настройки внешнего вида и поведения вашего виджета.

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

• Дорожная карта: Отображает вид карты дорог по умолчанию.
• Рельеф: Отображает физическую карту, основанную на информации о рельефе.
• Гибридная: отображает карту со смесью обычных и спутниковых видов.
• Спутник: показывает карту со спутниковыми снимками Google Earth.

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

1. Выберите GoogleMap в дереве виджетов или в области холста.
2. Перейдите в редактор свойств и прокрутите вниз до свойства Тип карты.
3. Нажмите на RoadMap, чтобы изменить значение Map Type.

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

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

• Выберите GoogleMap в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до свойства Стиль карты.
• Щелкните на значении Standart и выберите стиль.

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

• Выберите GoogleMap в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз, чтобы найти свойство Initial Zoom of Map и введите значение.

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

Вот как разрешить взаимодействие с картой:

• Выберите GoogleMap в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз, чтобы найти свойство Allow Interacting with the Map.
• Нажмите на флажок Allow Interacting with the Map, чтобы включить его.

Панель инструментов появляется в правом нижнем углу карты, когда пользователь нажимает на маркер. Она обеспечивает доступ к просмотру карты или запросу направления в мобильном приложении Google Maps, когда пользователь нажимает на любой значок на панели инструментов.

Чтобы включить панель инструментов:

• Выберите GoogleMap в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз, чтобы найти свойство Show Map Toolbar.
• Щелкните на флажке Show Map Toolbar, чтобы включить его.

Показ трафика на карте позволяет пользователю узнать о потоке движения на дорогах и помогает ему выбрать лучший маршрут.

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

• Выберите GoogleMap в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз, чтобы найти свойство «Показывать движение на карте«.
• Нажмите на флажок Показывать пробки на карте, чтобы включить его.

В этом разделе описывается работа с данными Firestore, например, создание коллекции, добавление данных в коллекцию, запрос коллекции и т.д.

Шаги для подключения к данным Firestore следующие:

• Создание коллекции
• Добавление данных в коллекцию
• Запрос коллекции

Посмотрите, как создать коллекцию. Вот как выглядит коллекция в парках:

Чтобы добавить данные в коллекцию:

1. Нажмите на Firestore в левом боковом меню.
2. Выберите коллекцию из списка в левой части.
3. Нажмите на Управление содержимым. Откроется новое окно браузера.
4. Выберите коллекцию и нажмите + Добавить документ.
5. Введите название и местоположение для любого места.
6. Аналогичным образом добавьте несколько документов для отображения нескольких маркеров на карте.

Чтобы запросить коллекцию firestore:

1. Выберите страницу в дереве виджетов.
2. Перейдите на вкладку Backend Query (в правой части экрана).
3. Установите для параметра Тип запроса значение Коллекция запросов.
4. Прокрутите вниз, чтобы найти выпадающий список Collection и измените его на коллекцию, в которой хранятся данные маркера.
5. Установите для параметра Тип запроса значение Список документов.
6. Нажмите кнопку Сохранить.

Пожалуйста, найдите инструкции по отображению/скрытию виджета здесь