在 Laravel 中設定自動完成地址功能可以顯著改善使用者體驗。本指南將向您展示如何使用 Google Places API 整合自動完成地址功能。
在 Laravel 中設定自動完成地址的分步指南
要求
- 一個 Laravel 專案。
- Google Places API 金鑰。
- jQuery 和 JavaScript 的基礎知識。
第 1 步：設定 Google Places API 金鑰
- 造訪 Google Cloud Console。
- 建立一個新專案（或使用現有專案）。
- 導航至API 和服務>庫，然後搜尋地點 API。
- 啟用地點 API。
- 前往 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 腳本：
<!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>
登入後複製
解釋：
-
類型：['地理編碼']將建議限制為地理編碼位址。
- 將 YOUR_GOOGLE_API_KEY 替換為您產生的實際 API 金鑰。
第 5 步：運行 Laravel 應用程式
執行以下命令來為應用程式提供服務：
在瀏覽器中造訪http://127.0.0.1:8000/autocomplete，您應該會看到一個位址輸入欄位。開始輸入地址，Google Places API 將提供地址建議。
第 6 步：處理選定的位址（可選）
如果您想進一步處理所選位址（例如，將其儲存在資料庫中），您可以修改表單以包含提交選項。
例如，您可以新增額外的表單欄位：
<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>
登入後複製
修改您的 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中文網其他相關文章！
