Виджет Google Maps

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

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

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

Требование

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

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

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

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

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

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

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

5. Для настройки визуального отображения карты перейдите в Properties Panel > Map Style.

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

подсказка

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

Маркеры

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

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

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

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

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

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

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

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

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

Чтобы изменить цвет маркера, перейдите в Properties Panel > Google Map и установите желаемый цвет в выпадающем меню Marker Color:

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

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

• Перейдите в Properties Panel > Google Map > установите Marker Icon на Image.

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

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

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

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

On Marker Tap [Action Trigger]

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

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

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

Дополнительные настройки

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

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

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

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

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

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

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

примечание

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

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

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

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

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

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

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

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

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

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

FAQ

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

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