Question

我正在尝试将google地图自动填充API嵌入到我的项目中。我做了所有类似于文档中编写的内容，但它返回了我的错误：Uncaught InvalidValueError：initAutocomplete不是一个函数。有时，当我重新加载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文档正文中的最后一个元素。这种方式{} {}在加载API时应始终可用。

Answer 2

我想知道你是怎么得到这个错误的，我也想知道它有时会如何起作用。

我收到此错误： InvalidValueError：不是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"/>

Google Maps Autocompletion API

2 个答案: