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

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

要求

1. Laravel 專案。
2. Google 地方資訊 API 金鑰。
3. jQuery 和 JavaScript 基礎知識。

第 1 步：設定 Google Places API 金鑰

1. 造訪 Google Cloud Console。
2. 建立一個新專案（或使用現有專案）。
3. 導覽至 API 和服務 > 庫，然後搜尋 Places 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，加入以下返回視圖的邏輯：

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


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



touch resources/views/autocomplete.blade.php




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





    
    
    

    
    




    
Autocomplete Address
    

        Address
        
    














  
  
  解釋：

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

第 5 步：運行 Laravel 應用程式

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

php artisan serve

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

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

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

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

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