Отметка положения

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

Виджет PlacePicker выглядит как кнопка. Когда вы нажимаете на него, он позволяет искать место. Когда вы начинаете вводить название места, отображается список подходящих мест. При выборе места его название появляется на кнопке. Остальная информация о месте доступна с помощью переменной placePickerValue (из Widget State).

На этой странице вы узнаете, как добавить виджет PlacePicker и показать выбранное место на карте Google.

Давайте построим простой пример, который показывает выбранные детали места в текстовом виджете. Вот как это выглядит:

Добавление PlacePicker и отображение информации о месте включает в себя следующие шаги

1. Включить биллинг платформы Google Maps
2. Включить Places API
3. Добавить ключи к FlutterFlow
4. Добавить виджет PlacePicker
5. Получение информации о месте

Для корректной работы виджета PlacePicker необходимо иметь биллинговый аккаунт, совместимый с сервисами Google Maps Platform (в Google Developers Console).

Если у вас есть биллинговый аккаунт, созданный при настройке Firebase, вы можете проверить, поддерживает ли ваш существующий аккаунт биллинг Google Maps Platform Billing здесь. В принципе, если ваш биллинговый аккаунт поддерживает биллинг USD, пропустите этот шаг.

Если ваш текущий биллинговый аккаунт не совместим с Google Maps Platform Billing, вам необходимо выполнить все шаги, указанные здесь (включая Дополнительные изменения).

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

Включение Places API позволяет получить доступ к серверам Google Maps и возвращает информацию о месте.

Чтобы включить Places API, выполните следующие действия:

• Откройте Google Developers Console (убедитесь, что ваш проект выбран в выпадающем списке вверху).
• Нажмите на меню APIs & Services -> Library слева.
• Найдите и выберите карточку Places API.
• Нажмите Включить.

Вы должны добавить в проект FlutterFlow ключи API, которые позволят вашему приложению взаимодействовать с сервером Google.

Чтобы добавить ключи API:

• Откройте Google Developers Console. (Убедитесь, что ваш проект выбран в выпадающем списке вверху).
• Нажмите меню APIs & Services -> Credentials слева.
• Найдите ключ Android (автоматически созданный Firebase), нажмите на SHOW KEY и затем скопируйте ключ (нажмите на иконку).
• Теперь перейдите в проект FlutterFlow и перейдите в раздел Settings and Integrations > Integrations > Google Maps.
• Найдите поле ввода Android API Key и вставьте ключ.
• Аналогичным образом скопируйте ключ iOS (автоматически созданный Firebase) и ключ Browser (автоматически созданный Firebase) из консоли разработчика Google и вставьте их в поля ввода iOS API Key и Web API Key соответственно.

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

• Перетащите виджет PlacePicker с вкладки Form Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
• Под виджетом PlacePicker добавьте несколько виджетов Text для отображения информации о месте.

После добавления виджета PlacePicker вы можете отобразить всю информацию о месте, такую как название, адрес и штат, обратившись к значению placePickerValue из Widget State.

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

• Выберите виджет Text в дереве виджетов или в области холста.
• Перейдите на панель свойств и нажмите на Set from Variable.
• Установите для параметра Source значение Widget State.
• Установите для параметра Доступные параметры значение placePickerValue.
• Выберите Place Fields для поля, которое вы хотите отобразить.
• При желании установите значение по умолчанию. Оно будет отображаться, если значение поля пустое.

Иногда вам может понадобиться показать выбранное место из виджета PlacePicker на карте. Например, установить на карте место приема и сдачи товара. Этого можно добиться, добавив действие Move Map Center и предоставив значения LatLong, полученные из виджета PlacePicker.

Давайте построим пример, показывающий выбранное место на карте Google. Вот как это выглядит:

Ниже приведены шаги по созданию примера:

1. Создание пользовательского интерфейса
2. Добавление действия для определения местоположения места на карте

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

1. Сначала удалите виджет Column и замените его виджетом Stack из вкладки Form Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
2. Внутри Stack добавьте виджет Google Map, чтобы показать местоположение места.
3. Теперь добавьте виджет PlacePicker и измените его положение.
4. Добавьте виджет Button, чтобы добавить действие, которое приведет выбранное место в центр.

Вы можете добавить действие для перемещения карты и отображения места в центре, следуя инструкциям на следующей странице.