Guide d'intégration de la saisie semi-automatique de Google Places dans Laravel-tutoriel php-php.cn

Guide d'intégration de la saisie semi-automatique de Google Places dans Laravel

DDD

Libérer： 2024-09-14 06:21:32

original

576 Les gens l'ont consulté

Guide to Integrating Google Places Autocomplete in Laravel

La configuration d'une fonctionnalité d'adresse de saisie semi-automatique dans Laravel peut améliorer considérablement l'expérience utilisateur. Ce guide vous montrera comment intégrer une fonctionnalité d'adresse de saisie semi-automatique à l'aide de l'API Google Places.

Guide étape par étape pour configurer l'adresse de saisie semi-automatique dans Laravel

Exigences

Un projet Laravel.
Clé API Google Places.
Connaissance de base de jQuery et JavaScript.

Étape 1 : Configurer une clé API Google Places

Visitez la console Google Cloud.
Créez un nouveau projet (ou utilisez-en un existant).
Accédez à API et services > Bibliothèque et recherchez l'API Places.
Activez l'API Places.
Accédez à API et services > Identifiants et créez une clé API. Assurez-vous de restreindre cette clé pour éviter toute utilisation non autorisée.

Étape 2 : installer Laravel et configurer des itinéraires

Créez un projet Laravel (si ce n'est pas déjà fait) :

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

Copier après la connexion

Créer un contrôleur :

php artisan make:controller AddressController

Copier après la connexion

Maintenant, définissez une route dans routes/web.php :

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

Copier après la connexion

Étape 3 : Créer la logique du contrôleur

Ouvrez app/Http/Controllers/AddressController.php et ajoutez la logique suivante pour renvoyer la vue :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AddressController extends Controller
{
    public function index()
    {
        return view('autocomplete');
    }
}

Copier après la connexion

Étape 4 : Créer la vue avec le champ de saisie de saisie semi-automatique

Créez le fichier de vue pour autocomplete.blade.php dans le répertoire resources/views :

touch resources/views/autocomplete.blade.php

Copier après la connexion

Dans le fichier autocomplete.blade.php, incluez le formulaire HTML et le script de l'API Google Places :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Address Autocomplete</title>

    <!-- Add Bootstrap CSS for styling (optional) -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <h2>Autocomplete Address</h2>
    <div class="form-group">
        <label for="autocomplete">Address</label>
        <input type="text" id="autocomplete" class="form-control" placeholder="Enter your address">
    </div>
</div>

<!-- Google Places API -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&libraries=places"></script>

<script>
    function initialize() {
        var input = document.getElementById('autocomplete');
        var options = {
            types: ['geocode'], // Restrict results to addresses
        };
        var autocomplete = new google.maps.places.Autocomplete(input, options);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

</body>
</html>

Copier après la connexion

Explication:

types : ['geocode'] limite les suggestions aux adresses géocodées.
Remplacez YOUR_GOOGLE_API_KEY par la clé API réelle que vous avez générée.

Étape 5 : Exécutez l’application Laravel

Exécutez la commande suivante pour servir l'application :

php artisan serve

Copier après la connexion

Visitez http://127.0.0.1:8000/autocomplete dans votre navigateur et vous devriez voir un champ de saisie d'adresse. Commencez à saisir une adresse et l'API Google Places vous proposera des suggestions d'adresse.

Étape 6 : Gérer l'adresse sélectionnée (facultatif)

Si vous souhaitez gérer davantage l'adresse sélectionnée (par exemple, la stocker dans une base de données), vous pouvez modifier le formulaire pour inclure une option de soumission.

Par exemple, vous pouvez ajouter un champ de formulaire supplémentaire :

<form method="POST" action="{{ route('storeAddress') }}">
    @csrf
    <input type="hidden" id="latitude" name="latitude">
    <input type="hidden" id="longitude" name="longitude">
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Copier après la connexion

Modifiez votre JavaScript pour capturer la latitude et la longitude :

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();
});

Copier après la connexion

Étape 7 : Créer la méthode Store (facultatif)

Dans votre AddressController, créez une méthode pour stocker l'adresse soumise :

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.');
}

Copier après la connexion

Ajoutez un itinéraire pour la soumission de ce formulaire dans web.php :

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

Copier après la connexion

Conclusion

En suivant ces étapes, vous avez intégré avec succès Google Places Autocomplete dans votre application Laravel. Vous pouvez désormais améliorer l'expérience utilisateur en permettant aux utilisateurs de compléter automatiquement les adresses et vous avez la possibilité de stocker les coordonnées de l'adresse choisie dans votre base de données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!