Leitfaden zur Integration der automatischen Vervollständigung von Google Places in Laravel

DDD
Freigeben: 2024-09-14 06:21:32
Original
572 Leute haben es durchsucht

Guide to Integrating Google Places Autocomplete in Laravel

Das Einrichten einer Funktion zur automatischen Vervollständigung von Adressen in Laravel kann das Benutzererlebnis erheblich verbessern. In dieser Anleitung erfahren Sie, wie Sie mithilfe der Google Places-API eine Funktion zur automatischen Vervollständigung von Adressen integrieren.

Schritt-für-Schritt-Anleitung zum Einrichten der automatischen Vervollständigung von Adressen in Laravel

Anforderungen

  1. Ein Laravel-Projekt.
  2. Google Places-API-Schlüssel.
  3. Grundkenntnisse in jQuery und JavaScript.

Schritt 1: Richten Sie einen Google Places-API-Schlüssel ein

  1. Besuchen Sie die Google Cloud Console.
  2. Erstellen Sie ein neues Projekt (oder verwenden Sie ein vorhandenes).
  3. Navigieren Sie zu APIs & Services > Bibliothek und suchen Sie nach der Places API.
  4. Aktivieren Sie die Places API.
  5. Gehen Sie zu APIs & Services > Anmeldeinformationen und erstellen Sie einen API-Schlüssel. Achten Sie darauf, diesen Schlüssel einzuschränken, um eine unbefugte Nutzung zu verhindern.

Schritt 2: Laravel installieren und Routen einrichten

Erstellen Sie ein Laravel-Projekt (falls Sie es noch nicht getan haben):

composer create-project --prefer-dist laravel/laravel address-autocomplete
Nach dem Login kopieren

Erstellen Sie einen Controller:

php artisan make:controller AddressController
Nach dem Login kopieren

Definieren Sie nun eine Route in Routen/web.php:

Route::get('/autocomplete', [AddressController::class, 'index']);
Nach dem Login kopieren

Schritt 3: Erstellen Sie die Controller-Logik

Öffnen Sie app/Http/Controllers/AddressController.php und fügen Sie die folgende Logik für die Rückgabe der Ansicht hinzu:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

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

Schritt 4: Erstellen Sie die Ansicht mit dem Eingabefeld für die automatische Vervollständigung

Erstellen Sie die Ansichtsdatei für autocomplete.blade.php im Verzeichnis resources/views:

touch resources/views/autocomplete.blade.php
Nach dem Login kopieren

Fügen Sie in autocomplete.blade.php das HTML-Formular und das Google Places-API-Skript ein:

<!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>
Nach dem Login kopieren

Erläuterung:

  • Typen: ['geocode'] beschränkt die Vorschläge auf geokodierte Adressen.
  • Ersetzen Sie YOUR_GOOGLE_API_KEY durch den tatsächlichen API-Schlüssel, den Sie generiert haben.

Schritt 5: Führen Sie die Laravel-Anwendung aus

Führen Sie den folgenden Befehl aus, um die Anwendung bereitzustellen:

php artisan serve
Nach dem Login kopieren

Besuchen Sie http://127.0.0.1:8000/autocomplete in Ihrem Browser und Sie sollten ein Adresseingabefeld sehen. Beginnen Sie mit der Eingabe einer Adresse und die Google Places API liefert Adressvorschläge.

Schritt 6: Behandeln Sie die ausgewählte Adresse (optional)

Wenn Sie die ausgewählte Adresse weiter bearbeiten möchten (z. B. in einer Datenbank speichern), können Sie das Formular so ändern, dass es eine Übermittlungsoption enthält.

Sie können beispielsweise ein zusätzliches Formularfeld hinzufügen:

<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>
Nach dem Login kopieren

Ändern Sie Ihr JavaScript, um den Breiten- und Längengrad zu erfassen:

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();
});
Nach dem Login kopieren

Schritt 7: Erstellen Sie die Store-Methode (optional)

Erstellen Sie in Ihrem AddressController eine Methode zum Speichern der übermittelten Adresse:

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.');
}
Nach dem Login kopieren

Fügen Sie eine Route für diese Formularübermittlung in web.php hinzu:

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

Abschluss

Indem Sie diese Schritte befolgen, haben Sie Google Places Autocomplete erfolgreich in Ihre Laravel-Anwendung integriert. Sie können das Benutzererlebnis jetzt verbessern, indem Sie Benutzern die automatische Vervollständigung von Adressen ermöglichen, und Sie haben die Möglichkeit, die ausgewählten Adresskoordinaten in Ihrer Datenbank zu speichern.

Das obige ist der detaillierte Inhalt vonLeitfaden zur Integration der automatischen Vervollständigung von Google Places in Laravel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage