Виджет Google Maps

Виджет Google Maps позволяет интегрировать интерактивные карты в ваше приложение, предоставляя пользователям ценные географические сведения. Например, в приложении для доставки еды этот виджет может отображать расположение ресторанов. Он предлагает множество вариантов настройки, позволяя адаптировать отображение с помощью различных типов карт и маркеров в соответствии с вашими потребностями.

Завершение функции

Мы постоянно улучшаем нашу платформу, поэтому обратите внимание, что хотя наша интеграция надежна, она еще не полностью завершена. Рекомендуем ознакомиться с доступными API и функциями, описанными ниже, чтобы убедиться, что они соответствуют потребностям разработки вашего приложения перед интеграцией.

Предварительное требование

Убедитесь, что вы добавили ключи API Google Maps перед добавлением виджета Google Maps в ваш проект.

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

1. Откройте палитру виджетов и найдите виджет Google Maps на вкладке Base Elements. Вы можете перетащить его в нужное место или добавить непосредственно из дерева виджетов или области холста.

2. По умолчанию карта отображает случайное местоположение. Чтобы задать конкретное местоположение, перейдите в панель свойств > Initial Location.

3. Введите значения широты и долготы в поля Lat и Lng, чтобы указать местоположение. Чтобы использовать текущее местоположение пользователя, задайте переменную через меню Set Variable > Global Properties > Current Device Location.

4. Чтобы изменить тип карты, перейдите в панель свойств > Map Type и выберите один из следующих вариантов:

   • Roadmap: Отображает стандартный вид дорожной карты.
   • Terrain: Показывает физическую карту на основе данных о рельефе.
   • Hybrid: Комбинирует обычный и спутниковый виды.
   • Satellite: Отображает спутниковые снимки из Google Earth.

5. Чтобы настроить визуальный стиль карты, перейдите в панель свойств > Map Style.

6. Чтобы задать начальный уровень масштабирования карты, перейдите в панель свойств > Initial Zoom карты и введите желаемое значение. Обратите внимание, что большее значение увеличит масштаб карты, а меньшее — уменьшит.

подсказка

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

Маркеры

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

• Выберите виджет Google Maps, перейдите в панель свойств > Num Markers и выберите, хотите ли вы отображать Single или Multiple маркеры.

Установка маркеров из Firebase

• Установите тип маркера в Document, если данные находятся в коллекции Firestore.

• В случае документов создайте коллекцию и выполните запрос к ней на любом виджете (который должен быть родительским для Google Maps) или странице.

• В документе маркера задайте источник маркеров, как показано в следующем видео.

Установка маркеров из списка LatLng

Если вы выберете LatLng, вам необходимо указать источник, содержащий список местоположений в виде типа данных (LatLng) (например, App State > [variable_name] (List of LatLng)).

Изменение цвета маркера

Чтобы изменить цвет маркера, перейдите в панель свойств > Google Maps > установите значение выпадающего списка цвета маркера в желаемый цвет:

Установка изображения маркера

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

• Перейдите в панель свойств > Google Maps > установите Marker Icon в Image.

• Выберите тип изображения, которое вы хотите установить:

  • Для изображения, размещенного в сети, установите тип изображения в Network и укажите URL изображения в поле Path.
  • Чтобы предоставить изображение из вашей системы, установите тип изображения в Asset и загрузите изображение.

Центрирование карты при нажатии на маркер

Чтобы центрировать карту при нажатии на маркер, перейдите в панель свойств > Google Maps > включите переключатель Centering Map on Marker Tap.

On Marker Tap [Action Trigger]

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

Вот как это сделать:

• Выберите виджет Google Maps.
• В панели свойств выберите Actions и откройте Action Flow Editor.
• Под триггером действия On Marker Tap добавьте любые действия.

Расширенные настройки

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

Разрешение взаимодействия с картой

По умолчанию функция взаимодействия с картой включена, что позволяет пользователям перемещать, увеличивать и уменьшать масштаб карты. Однако вы можете отключить опции Allow Zooming the Map и Show Zoom Buttons на карте, если хотите ограничить функциональность масштабирования.

Чтобы получить доступ к этим настройкам, перейдите в панель свойств > Google Maps > Allows Interacting with the Map.

Map Takes Gesture Preference

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

к сведению

Эта настройка доступна только если включены Allow Interacting и Allow Zooming.

Map Takes Gesture Preference (Disabled)

Map Takes Gesture Preference (Enabled)

Отображение местоположения пользователя

При включении на карте появляется синяя точка, указывающая текущее местоположение пользователя. Если карта перемещается, пользователи могут заново отцентрировать свое местоположение, нажав кнопку в правом верхнем углу.

Чтобы включить эту опцию, перейдите в панель свойств > Google Maps > включите переключатель Show User Location.

примечание

При включении этой опции убедитесь, что Initial Location установлено в Global Properties > Current Device Location.

Отображение компаса

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

Чтобы включить компас, перейдите в панель свойств > Google Maps > включите переключатель Show Compass.

Включение панели инструментов карты

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

Чтобы включить панель инструментов, перейдите в панель свойств > Google Maps > включите переключатель Show Map Toolbar.

Отображение трафика на карте

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

Чтобы отобразить актуальный трафик на карте, перейдите в панель свойств > Google Maps > включите переключатель Show Traffic on Map.

FAQ

Почему пользовательские маркеры Google Maps не работают в режиме запуска или тестирования?

В связи с недавним обновлением пользовательские маркеры Google Maps не будут работать в режимах Run или Test, если не включен CanvasKit. Это ожидаемое поведение. Чтобы эффективно использовать пользовательские маркеры, включите CanvasKit в Advanced Web Settings.