在 Laravel 中整合 Google 地點自動完成功能的指南
在 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 應用程式
執行以下命令來為應用程式提供服務：
php artisan serve
在瀏覽器中造訪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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
PHP和Python：比較兩種流行的編程語言
Apr 14, 2025 am 12:13 AM
PHP和Python各有優勢，選擇依據項目需求。 1.PHP適合web開發，尤其快速開發和維護網站。 2.Python適用於數據科學、機器學習和人工智能，語法簡潔，適合初學者。
說明PHP中的安全密碼散列（例如，password_hash，password_verify）。為什麼不使用MD5或SHA1？
Apr 17, 2025 am 12:06 AM
在PHP中，應使用password_hash和password_verify函數實現安全的密碼哈希處理，不應使用MD5或SHA1。1)password_hash生成包含鹽值的哈希，增強安全性。 2)password_verify驗證密碼，通過比較哈希值確保安全。 3)MD5和SHA1易受攻擊且缺乏鹽值，不適合現代密碼安全。
PHP行動：現實世界中的示例和應用程序
Apr 14, 2025 am 12:19 AM
PHP在電子商務、內容管理系統和API開發中廣泛應用。 1)電子商務：用於購物車功能和支付處理。 2)內容管理系統：用於動態內容生成和用戶管理。 3)API開發：用於RESTfulAPI開發和API安全性。通過性能優化和最佳實踐，PHP應用的效率和可維護性得以提升。
PHP：網絡開發的關鍵語言
Apr 13, 2025 am 12:08 AM
PHP是一種廣泛應用於服務器端的腳本語言，特別適合web開發。 1.PHP可以嵌入HTML，處理HTTP請求和響應，支持多種數據庫。 2.PHP用於生成動態網頁內容，處理表單數據，訪問數據庫等，具有強大的社區支持和開源資源。 3.PHP是解釋型語言，執行過程包括詞法分析、語法分析、編譯和執行。 4.PHP可以與MySQL結合用於用戶註冊系統等高級應用。 5.調試PHP時，可使用error_reporting()和var_dump()等函數。 6.優化PHP代碼可通過緩存機制、優化數據庫查詢和使用內置函數。 7
PHP的持久相關性：它還活著嗎？
Apr 14, 2025 am 12:12 AM
PHP仍然具有活力，其在現代編程領域中依然佔據重要地位。 1)PHP的簡單易學和強大社區支持使其在Web開發中廣泛應用；2)其靈活性和穩定性使其在處理Web表單、數據庫操作和文件處理等方面表現出色；3)PHP不斷進化和優化，適用於初學者和經驗豐富的開發者。
PHP類型提示如何起作用，包括標量類型，返回類型，聯合類型和無效類型？
Apr 17, 2025 am 12:25 AM
PHP類型提示提升代碼質量和可讀性。 1)標量類型提示：自PHP7.0起，允許在函數參數中指定基本數據類型，如int、float等。 2)返回類型提示：確保函數返回值類型的一致性。 3)聯合類型提示：自PHP8.0起，允許在函數參數或返回值中指定多個類型。 4)可空類型提示：允許包含null值，處理可能返回空值的函數。
PHP與Python：了解差異
Apr 11, 2025 am 12:15 AM
PHP和Python各有優勢，選擇應基於項目需求。 1.PHP適合web開發，語法簡單，執行效率高。 2.Python適用於數據科學和機器學習，語法簡潔，庫豐富。
PHP和Python：代碼示例和比較
Apr 15, 2025 am 12:07 AM
PHP和Python各有優劣，選擇取決於項目需求和個人偏好。 1.PHP適合快速開發和維護大型Web應用。 2.Python在數據科學和機器學習領域佔據主導地位。
