谷歌自动完成地址在laravel中不起作用

Question

我的自动完成地址功能适用于 HTML。 但是当我在 laravel Blade 中使用它时，它不会在我开始输入时提示地址

地址弹出未显示此代码适用于扩展名为 .html 的文件，但不适用于 laravel Blade。

你能帮我解释一下为什么相同的代码在 HTML 中运行良好，但在 Laravel 中运行良好。

<div class="panel-body">
    <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" class="form-control">
    <br>
    <div id="address22">
        <div class="row">
            <div class="col-md-6">
                <label class="control-label">Street address</label>
                <input class="form-control" id="street_number" disabled="true">
            </div>
            <div class="col-md-6">
                <label class="control-label">Route</label>
                <input class="form-control" id="route" disabled="true">
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <label class="control-label">City</label>
                <input class="form-control field" id="locality" disabled="true">
            </div>
            <div class="col-md-6">
                <label class="control-label">State</label>
                <input class="form-control" id="administrative_area_level_1" disabled="true">
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <label class="control-label">Zip code</label>
                <input class="form-control" id="postal_code" disabled="true">
            </div>
            <div class="col-md-6">
                <label class="control-label">Country</label>
                <input class="form-control" id="country" disabled="true">
            </div>
        </div>
    </div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="auto-complete.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwd3zWcsr&libraries=places&callback=initAutocomplete" async defer></script>
<script>
    var placeSearch, autocomplete;
    var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
    };

    function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */
            (document.getElementById('autocomplete')), {
                types: ['geocode']
            });

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
    }

    function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
            document.getElementById(component).value = '';
            document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
            var addressType = place.address_components[i].types[0];
            if (componentForm[addressType]) {
                var val = place.address_components[i][componentForm[addressType]];
                document.getElementById(addressType).value = val;
            }
        }
    }

    // Bias the autocomplete object to the user's geographical location,
    // as supplied by the browser's 'navigator.geolocation' object.
    function geolocate() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var geolocation = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                var circle = new google.maps.Circle({
                    center: geolocation,
                    radius: position.coords.accuracy
                });
                autocomplete.setBounds(circle.getBounds());
            });
        }
    }
</script>

Answer 1

原因是，文件auto-complete.js 未加载

<script src="auto-complete.js"></script>

假设文件位于 laravel 应用程序中的public/js 目录中，您可以使用asset 辅助函数来访问文件并将脚本引用更正为：

<script src="{{ asset('js/auto-complete.js') }}"></script>

最好检查您的浏览器控制台是否存在特定于自动完成功能的错误。