谷歌地图自动完成 API

Question

我正在尝试将谷歌地图自动完成 API 嵌入到我的项目中。 我做了所有事情，就像它在文档中写的那样，但它给我返回了这个错误：Uncaught InvalidValueError: initAutocomplete is not a function。有时，当我重新加载3次页面时，它终于可以工作了，这很奇怪...... 有人知道问题可能来自哪里吗？ 这是我所做的测试的链接：http://www.dubair.ie/en/maps

这是页面的代码（关键脚本的链接在另一个文件的头部）：

{% extends "PlatformBundle::body.html.twig" %}

{% block content %}

    <div id="locationField" class="form-group col-xs-12">
        <textarea id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" autofocus class="form-control"></textarea>
    </div>

    <div id="details" class="hidden">
        <input disabled id="street_number"/>
        <input disabled id="route"/>
        <input disabled id="locality"/>
        <input disabled id="postal_code"/>
        <input disabled id="country"/>
    </div>

    <script>
        // This example displays an address form, using the autocomplete feature
        // of the Google Places API to help users fill in the information.

        // This example requires the Places library. Include the libraries=places
        // parameter when you first load the API. For example:
        // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

        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'], componentRestrictions: {country: 'ie'}});

            // 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();

            $('#details').removeClass('hidden').hide().slideDown('slow');

            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>

{% endblock %}

感谢您的帮助

Answer 1

我认为这是因为您在标头中调用 API，但您在 HTML 文档的正文中有 initAutocomplete 函数。有时身体尚未加载，有时是。

只需输入以下代码：

<script src="https://maps.googleapis.com/maps/api/js?key=....&libraries=places&callback=initAutocomplete" async defer></script>

在</body> 标记之前向右（并将其从标题中删除）。所以它将是 HTML 文档正文中的最后一个元素。这样initAutocomplete 在加载 API 时应该始终可用。

Answer 2

我想知道你是怎么得到这个错误的，我也想知道它有时是怎么工作的。

我收到此错误：InvalidValueError: not an instance of HTMLInputElement

错误应该很清楚：您使用 <textarea> ，但 API 需要 <input>

替换：

<textarea id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" autofocus class="form-control"></textarea>

与

<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" autofocus class="form-control"/>