Rumah > Artikel > pembangunan bahagian belakang > Panduan untuk Mengintegrasikan Autolengkap Tempat Google dalam Laravel

Panduan untuk Mengintegrasikan Autolengkap Tempat Google dalam Laravel

DDDasal: 2024-09-14 06:21:32545semak imbas

Guide to Integrating Google Places Autocomplete in Laravel

Menyediakan ciri alamat autolengkap dalam Laravel boleh meningkatkan pengalaman pengguna dengan ketara. Panduan ini akan menunjukkan kepada anda cara untuk menyepadukan fungsi alamat autolengkap menggunakan API Tempat Google.

Panduan Langkah demi Langkah untuk Menyediakan Alamat Autolengkap dalam Laravel

Keperluan

Projek Laravel.
Kunci API Tempat Google.
Pengetahuan asas jQuery dan JavaScript.

Langkah 1: Sediakan Kunci API Tempat Google

Lawati Konsol Awan Google.
Buat projek baharu (atau gunakan projek sedia ada).
Navigasi ke API & Perkhidmatan > Perpustakaan, dan cari API Tempat.
Dayakan API Tempat.
Pergi ke API & Perkhidmatan > Bukti kelayakan dan buat kunci API. Pastikan untuk mengehadkan kunci ini untuk mengelakkan penggunaan yang tidak dibenarkan.

Langkah 2: Pasang Laravel dan Sediakan Laluan

Buat projek Laravel (jika anda belum melakukannya):

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

Buat pengawal:

php artisan make:controller AddressController

Sekarang, tentukan laluan dalam route/web.php:

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

Langkah 3: Cipta Logik Pengawal

Buka app/Http/Controllers/AddressController.php dan tambah logik berikut untuk mengembalikan paparan:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

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

Langkah 4: Cipta Paparan dengan Medan Input Autolengkap

Buat fail paparan untuk autocomplete.blade.php dalam direktori sumber/pandangan:

touch resources/views/autocomplete.blade.php

Dalam autocomplete.blade.php, masukkan borang HTML dan skrip API Tempat Google:

<!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>

Penjelasan:

jenis: ['geocode'] mengehadkan cadangan kepada alamat bergeokod.
Ganti YOUR_GOOGLE_API_KEY dengan kunci API sebenar yang anda hasilkan.

Langkah 5: Jalankan Aplikasi Laravel

Jalankan arahan berikut untuk menyampaikan aplikasi:

php artisan serve

Lawati http://127.0.0.1:8000/autocomplete dalam penyemak imbas anda dan anda akan melihat medan input alamat. Mula menaip alamat dan Google Places API akan memberikan cadangan alamat.

Langkah 6: Kendalikan Alamat Terpilih (Pilihan)

Jika anda ingin mengendalikan alamat yang dipilih dengan lebih lanjut (cth., simpannya dalam pangkalan data), anda boleh mengubah suai borang untuk memasukkan pilihan penyerahan.

Sebagai contoh, anda boleh menambah medan borang tambahan:

<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>

Ubah suai JavaScript anda untuk menangkap latitud dan longitud:

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

Langkah 7: Cipta Kaedah Kedai (Pilihan)

Dalam AddressController anda, buat kaedah untuk menyimpan alamat yang diserahkan:

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

Tambahkan laluan untuk penyerahan borang ini dalam web.php:

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

Kesimpulan

Dengan mengikuti langkah ini, anda telah berjaya menyepadukan Autolengkap Tempat Google dalam aplikasi Laravel anda. Anda kini boleh meningkatkan pengalaman pengguna dengan membenarkan pengguna melengkapkan alamat secara automatik dan anda mempunyai pilihan untuk menyimpan koordinat alamat yang dipilih dalam pangkalan data anda.

Atas ialah kandungan terperinci Panduan untuk Mengintegrasikan Autolengkap Tempat Google dalam Laravel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php JavaScript laravel jquery html define if for include Directory restrict using console this input database http

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Pengurusan Skema Pangkalan Data dalam Laravel Menggunakan Migrasi: Tutorial MendalamArtikel seterusnya：Pengurusan Skema Pangkalan Data dalam Laravel Menggunakan Migrasi: Tutorial Mendalam

Artikel berkaitan

Lihat lagi