Избегайте зависимости и делайте запросы напрямую
Я хотел создать веб-приложение на React, которое будет искать местоположение пользователя. Мне удалось это сделать с помощью Автозаполнения Google Place.
Автозаполнение - это функция библиотеки Places в Maps JavaScript API. Когда пользователь начинает вводить адрес, автозаполнение заполняет все остальное.
Я попытался реализовать ввод Google Place Autocomplete в строке поиска в React, но вскоре понял, что это сложнее, чем я ожидал. Я начал искать другие способы сделать это и нашел много способов. Однако все они использовали библиотеки.
Я решил написать эту короткую статью, чтобы показать, как я сделал это без использования сторонней библиотеки.
Настройка проекта
Во-первых, я собираюсь использовать create-react-app для создания быстрого одностраничного приложения React. Мы можем настроить современное веб-приложение, выполнив одну команду:
npx create-react-app google-place-autocomplete
После этого переместите его в каталог google-place-autocomplete и запустите с терминала:
cd google-place-autocomplete npm start
Прежде чем мы начнем, вам понадобится ключ API для API Google Адресов. Вы можете получить этот ключ здесь. Я храню Google API Key в .env файле - вы тоже должны.
Ваш проект готов к запуску. Ваш package.json должен выглядеть так:
Создание магического кода
Давайте реализуем основной SearchLocationInput компонент для работы с API автозаполнения Google Place. Во-первых, нам нужно создать функцию для загрузки скрипта для работы с Google API. Давайте создадим SearchLocationInput.js с функцией loadScript:
Я использовал этот скрипт для динамического JavaScript для быстрой загрузки страниц на наших общедоступных страницах. По завершении он динамически загружает файлы JavaScript с обратным вызовом. Затем мы должны назначить Google Place Map переменной autoComplete при рендеринге компонента:
В методе handleScriptLoad мы начинаем с объявления параметров для authComplete. Мы указываем свойства, которые мы получаем от API, методом setFields. Не стесняйтесь копаться в документации для получения более подробной информации.
Затем мы подключаемся к прослушивателю автозаполнения, который слушает всякий раз, когда пользователь выбирает одно из предложений автозаполнения. Давайте создадим handlePlaceSelect метод для обработки выбора:
Этот метод вызывается при срабатывании события и получает данные о месте из API. Тогда мы сможем проделать любую операцию с данными.
Наконец, наш SearchLocationInput.js:
Продемонстрируем нашу автозаполнение!
Если вы хотите проверить весь код, вот ссылка на Github.
Надеюсь, вы нашли эту статью полезной.
