Laravel 9 Google自动完成地址-DEV365 开发者社区

在本文中，我们将看到Laravel 9 Google Autococtlete地址。在这里，我们将学习如何在Laravel 9中使用Google Autocomplete地址。

您可以通过使用Google地址API来找出如何在Laravel 9中创建和实现Google Autocoptere地址。

自动完成是地图JavaScript API中该位置库的功能。

您可以使用AutoComplete为您的应用程序提供Google Maps搜索字段的类型搜索行为。

Laravel Google AutoComplete地址可帮助您显示完整的地址，例如经度，纬度，国家，州，城市和邮政编码。

所以，让我们看看Laravel 9 Google Maps Autocomplete，Laravel 9 Google Place API，Laravel 9 Place AutoComplete，Google Autocomplete City和Google Autocomplete Country。

Step 1: Install Laravel 9 Application

Step 2: Google Place API Key

Step 3: Create a Route

Step 4: Create Controller

Step 5: Create Blade View File

步骤1：安装Laravel 9申请Google AutoComplete地址

在此步骤中，我们将使用以下命令安装Laravel 9应用程序。

作曲家创建项目-Prefer-Dist laravel/laravel-laravel-9-google-autocomplete-address

步骤2：Google Place API键

现在，我们需要Google Place API密钥。因此，请访问cloud.google.com并获取Google API键。 API的位置是一项使用HTTP请求返回有关位置的信息的服务。该API中的位置定义为机构，地理位置或突出的兴趣点。

步骤3：创建路线

在此步骤中，我们将创建到web.php文件的路由。

路由/web.php

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\GoogleAddressController;

Route::get('google-autocomplete-address', [GoogleAddressController::class, 'index']);

步骤4：创建控制器

在此步骤中，我们将创建一个GoogleAddressController文件。因此，将以下代码添加到该文件。

http/controllers/googleaddresscontroller.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class GoogleAddressController extends Controller
{
    public function index()
    {
        return view('google_autocomplete_address');
    }
}

步骤5：创建刀片视图文件

现在，我们将创建用于查看的刀片文件。因此，将以下代码添加到该文件。

资源/视图/google_autocomplete_address.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel 9 Google Autocomplete Address - Techsolutionstuff</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>
    <div class="container mt-5">
        <h2>Laravel 9 Google Autocomplete Address - Techsolutionstuff</h2><br>  
        <div class="form-group">            
            <input type="text" name="autocomplete" id="autocomplete" class="form-control" placeholder="Enter Location">
        </div>  
        <div class="form-group" id="latitudeArea">
            <label>Latitude</label>
            <input type="text" id="latitude" name="latitude" class="form-control">
        </div>  
        <div class="form-group" id="longtitudeArea">
            <label>Longitude</label>
            <input type="text" name="longitude" id="longitude" class="form-control">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=YOUR_GOOGLE_PALCE_API_KEY&libraries=places" ></script>
    <script>
        $(document).ready(function () {
            $("#latitudeArea").addClass("d-none");
            $("#longtitudeArea").addClass("d-none");
        });
    </script>
    <script>
        google.maps.event.addDomListener(window, 'load', initialize);

        function initialize() {
            var input = document.getElementById('autocomplete');
            var autocomplete = new google.maps.places.Autocomplete(input);

            autocomplete.addListener('place_changed', function () {
                var place = autocomplete.getPlace();
                $('#latitude').val(place.geometry['location'].lat());
                $('#longitude').val(place.geometry['location'].lng());  
                $("#latitudeArea").removeClass("d-none");
                $("#longtitudeArea").removeClass("d-none");
            });
        }
    </script>
</body>
</html>

用于测试目的，您可以使用以下脚本。

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=places"></script>

复制下面的URL并在浏览器上运行。

http://localhost:8000/google-autocomplete-address