在 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中文网其他相关文章！