jquery - initAutocomplete 不是一个函数（在本地机器上工作，但在实时服务器中部署时显示问题）

问题描述

我正在尝试使用谷歌地图 api。它在本地机器上完美运行。但是当我在实时服务器中部署代码时，它在控制台中显示错误，我无法加载谷歌地图

脚本：

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

    function initAutocomplete() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center : {
            lat : 11.39930615709189,
            lng : 79.69353675842285
        },
        zoom : 13,
        mapTypeId : 'roadmap'
    });

    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
        searchBox.setBounds(map.getBounds());
    });

    document.getElementById('addAddress').addEventListener('click',
            function() {
                addAddress(geocoder, map, service);
            });

    var markers = [];
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {
        var places = searchBox.getPlaces();

        if (places.length == 0) {
            return;
        }

        // Clear out the old markers.
        markers.forEach(function(marker) {
            marker.setMap(null);
        });
        markers = [];

        // For each place, get the icon, name and location.
        var bounds = new google.maps.LatLngBounds();
        places.forEach(function(place) {
            if (!place.geometry) {
                console.log("Returned place contains no geometry");
                return;
            }
            var icon = {
                url : place.icon,
                size : new google.maps.Size(71, 71),
                origin : new google.maps.Point(0, 0),
                anchor : new google.maps.Point(17, 34),
                scaledSize : new google.maps.Size(25, 25)
            };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
                map : map,
                icon : icon,
                title : place.name,
                position : place.geometry.location
            }));

            if (place.geometry.viewport) {
                // Only geocodes have viewport.
                bounds.union(place.geometry.viewport);
            } else {
                bounds.extend(place.geometry.location);
            }
        });
        map.fitBounds(bounds);
    });

    var geocoder = new google.maps.Geocoder();

    /* document.getElementById('submit').addEventListener('click', function() {
        geocodeAddress(geocoder, map);
    }); */

    var service = new google.maps.DistanceMatrixService;

}

错误：

未捕获（承诺）Xc 消息：“initAutocomplete 不是函数”名称：“InvalideValueError”堆栈：“新 Xc 错误（https://maps.googleapis.com/maps/api/js?key= **** *&libraries=places&callback=initAutocomplete:63:227) 在 Object._.Yc ( https://maps.googleapis.com/maps/api/js?key= *****&libraries=places&callback=initAutocomplete:63:337 ）在呃（https://maps.googleapis.com/maps/api/js?key= *****&libraries=places&callback=initAutocomplete:132:221）在https://maps.googleapis.com/maps/ api/js?key= *****&libraries=places&callback=initAutocomplete:132:107"

标签： jqueryjsp

jquery - initAutocomplete 不是一个函数（在本地机器上工作，但在实时服务器中部署时显示问题）

问题描述

解决方案

推荐阅读