Перейти к основному содержимому

API Карт и Местоположений

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

Добавление API Карт

Чтобы включить Google Maps в ваш проект, выполните следующие шаги:

Получение API-ключей

Для начала работы с API Google Maps необходимо включить API Карт в Консоли Google Cloud.

  1. После входа в консоль Cloud убедитесь, что вы находитесь в правильном проекте Google Cloud. Затем из правого меню перейдите в Библиотеку и найдите Maps.

  2. Вам может быть предложено добавить учетную запись для выставления счетов от Google Cloud. Добавьте учетную запись, чтобы продолжить.

  3. Вы увидите варианты, такие как SDK для iOS, SDK для Android и API JavaScript для карт. Выберите платформу, которую хотите поддержать, и затем нажмите Включить. Если вы работаете в режиме запуска, убедитесь, что ваш API JavaScript для карт включен.

warning

Для обеспечения безопасности ваших API-ключей ознакомьтесь с Руководством по bew@безопасности API-ключей

  • Нажмите на меню Учетные данные слева.

  • Найдите ключ для нужной вам платформы и скопируйте ключ.

Добавление ключей в FlutterFlow

Теперь добавьте API-ключи платформенно в раздел Настройки FlutterFlow

g-maps-settings.png

Создание нового ключа, если его нет

Если вы не найдете ключ Android (автоматически созданный Firebase) или iOS (автоматически созданный Firebase) в консоли разработчика Google, вот шаги по его созданию:

  • На вашей Консоли Cloud нажмите меню Учетные данные слева.

  • Нажмите на + Создать учетные данные вверху.

  • Нажмите на API-ключ, чтобы создать новый ключ для приложения Android. Точно так же создайте ключ для iOS и Веба.

Добавление API Местоположений

Чтобы включить API Местоположений в ваш проект, выполните шаги из раздела "Добавление API Карт" и дополнительно также включите API Местоположений из библиотеки API, если он еще не включен.

places-api.png