Настройка функции автозаполнения адреса в Laravel может значительно улучшить взаимодействие с пользователем. В этом руководстве показано, как интегрировать функцию автозаполнения адреса с помощью API Google Адресов.

Пошаговое руководство по настройке адреса автозаполнения в Laravel

Требования

1. Проект Laravel.
2. Ключ API Google Адресов.
3. Базовые знания jQuery и JavaScript.

Шаг 1. Настройте ключ API Google Адресов

1. Посетите Google Cloud Console.
2. Создайте новый проект (или используйте существующий).
3. Перейдите в раздел API и сервисы > Библиотека и найдите Places API.
4. Включите Places API.
5. Перейдите в раздел API и службы > Учетные данные и создайте ключ API. Обязательно заблокируйте этот ключ, чтобы избежать несанкционированного использования.

Шаг 2. Установите Laravel и настройте маршруты

Создайте проект Laravel (если вы еще этого не сделали):

composer create-project --prefer-dist laravel/laravel address-autocomplete

Создайте контроллер:

php artisan make:controller AddressController

Теперь определите маршрут в маршрутах/web.php:

Route::get('/autocomplete', [AddressController::class, 'index']);

Шаг 3. Создайте логику контроллера

Откройте app/Http/Controllers/AddressController.php и добавьте следующую логику для возврата представления:

  
  
  Шаг 4. Создайте представление с полем ввода автозаполнения


Создайте файл представления для autocomplete.blade.php в каталоге resources/views:


touch resources/views/autocomplete.blade.php




В файле autocomplete.blade.php включите HTML-форму и скрипт API Google Адресов:




    

    
Autocomplete Address
    

        Address
        








  
  
  Объяснение:

• типы: ['geocode'] ограничивает предложения геокодированными адресами.
• Замените YOUR_GOOGLE_API_KEY фактическим сгенерированным вами ключом API.

Шаг 5. Запустите приложение Laravel.

Для обслуживания приложения выполните следующую команду:

php artisan serve

Посетите http://127.0.0.1:8000/autocomplete в своем браузере, и вы увидите поле для ввода адреса. Начните вводить адрес, и Google Places API предложит варианты адреса.

Шаг 6. Обработка выбранного адреса (необязательно)

Если вы хотите и дальше обрабатывать выбранный адрес (например, сохранить его в базе данных), вы можете изменить форму, включив в нее опцию отправки.

Например, вы можете добавить дополнительное поле формы:

Измените свой JavaScript, чтобы он фиксировал широту и долготу:

var autocomplete = new google.maps.places.Autocomplete(input, options);

autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
    document.getElementById('latitude').value = place.geometry.location.lat();
    document.getElementById('longitude').value = place.geometry.location.lng();
});

Шаг 7. Создайте метод Store (необязательно)

В вашем AddressController создайте метод для хранения отправленного адреса:

public function storeAddress(Request $request)
{
    $latitude = $request->input('latitude');
    $longitude = $request->input('longitude');

    // Store the address in the database or perform other actions.

    return back()->with('success', 'Address stored successfully.');
}

Добавьте маршрут для отправки этой формы в web.php:

Route::post('/store-address', [AddressController::class, 'storeAddress'])->name('storeAddress');

Заключение

Выполнив эти шаги, вы успешно интегрировали автозаполнение Google Адресов в свое приложение Laravel. Теперь вы можете улучшить взаимодействие с пользователем, разрешив пользователям автоматически заполнять адреса, и у вас есть возможность сохранить выбранные координаты адреса в вашей базе данных.