在 Laravel 中整合 Google 地點自動完成功能的指南

在 Laravel 中設定自動完成地址功能可以顯著改善使用者體驗。本指南將向您展示如何使用 Google Places API 整合自動完成地址功能。

在 Laravel 中設定自動完成地址的分步指南

要求

1. 一個 Laravel 專案。
2. Google Places API 金鑰。
3. jQuery 和 JavaScript 的基礎知識。

第 1 步：設定 Google Places API 金鑰

1. 造訪 Google Cloud Console。
2. 建立一個新專案（或使用現有專案）。
3. 導航至API 和服務>庫，然後搜尋地點 API。
4. 啟用地點 API。
5. 前往API 和服務>憑證 並建立 API 金鑰。請務必限制此密鑰以避免未經授權的使用。

第 2 步：安裝 Laravel 並設定路由

建立一個 Laravel 專案（如果您還沒有）：

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

建立控制器：

php artisan make:controller AddressController

現在，在routes/web.php中定義一個路由：

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

第 3 步：建立控制器邏輯

開啟 app/Http/Controllers/AddressController.php 並加入以下返回視圖的邏輯：

<?php namespace App\Http\Controllers;

use Illuminate\Http\Request;

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

第 4 步：建立具有自動完成輸入欄位的視圖

在resources/views目錄中建立autocomplete.blade.php的視圖檔案：

touch resources/views/autocomplete.blade.php

在 autocomplete.blade.php 中，包含 HTML 表單和 Google Places API 腳本：

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



<div class="container mt-5">
    <h2 id="Autocomplete-Address">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>

解釋：

• 類型：['地理編碼']將建議限制為地理編碼位址。
• 將 YOUR_GOOGLE_API_KEY 替換為您產生的實際 API 金鑰。

第 5 步：運行 Laravel 應用程式

執行以下命令來為應用程式提供服務：

php artisan serve

在瀏覽器中造訪http://127.0.0.1:8000/autocomplete，您應該會看到一個位址輸入欄位。開始輸入地址，Google Places API 將提供地址建議。

第 6 步：處理選定的位址（可選）

如果您想進一步處理所選位址（例如，將其儲存在資料庫中），您可以修改表單以包含提交選項。

例如，您可以新增額外的表單欄位：

@csrf Submit

修改您的 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 Places Autocomplete 整合到您的 Laravel 應用程式中。現在您可以透過允許使用者自動完成地址來增強使用者體驗，並且您可以選擇將所選地址座標儲存在資料庫中。

以上是在 Laravel 中整合 Google 地點自動完成功能的指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！