在 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 应用程序中。您现在可以通过允许用户自动完成地址来增强用户体验，并且您可以选择将所选地址坐标存储在数据库中。