Maison > Article > développement back-end > Guide d'intégration de la saisie semi-automatique de Google Places dans 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.
Créez un projet Laravel (si ce n'est pas déjà fait) :
composer create-project --prefer-dist laravel/laravel address-autocomplete
Créer un contrôleur :
php artisan make:controller AddressController
Maintenant, définissez une route dans routes/web.php :
Route::get('/autocomplete', [AddressController::class, 'index']);
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');
}
}
Créez le fichier de vue pour autocomplete.blade.php dans le répertoire resources/views :
touch resources/views/autocomplete.blade.php
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>
Exécutez la commande suivante pour servir l'application :
php artisan serve
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.
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>
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();
});
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.');
}
Ajoutez un itinéraire pour la soumission de ce formulaire dans web.php :
Route::post('/store-address', [AddressController::class, 'storeAddress'])->name('storeAddress');
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!