javascript - JS 自动完成的问题。不触发

Question

我有以下 JSP

<!-- Map section -->

<div class="row">
    <div class="col-md-9 col-sm-9 col-xs-9">
        <div id="map" style="width: 100%; height: 500px"></div>
    </div>
</div>

<!-- Modal with form. Inside this modal form i have this input -->


<input class="form-control" name="pickupLocation" id="txtPickUpLocation" type="text" required>


<!-- Script Section inside JSP file -->

<script>
var autocomplete;
function initializate(){
    geocoder = new google.maps.Geocoder();


    //TEMPORARY SOLUTION: Set Manually coordinates (Guayaquil)

    setCoordinates(-2.159530, -79.894745);
    test();
}
function test(){

    var inputPlace = document.getElementById('txtPickUpLocation');
    autocomplete = new google.maps.places.Autocomplete(inputPlace);

    google.maps.event.addListener(autocomplete, 'place_changed',
    function() {
        var place = autocomplete.getPlace();

        console.log('Coordenadas obtenidas');
        var lat = place.geometry.location.lat();
        var lng = place.geometry.location.lng();

    });
}

function setCoordinates(lat, lng) {
        //Save the TMP coordinates to later, obtain ubication in string form.
        latitude = lat;
        longitude = lng;

        obtainUserPlaceLocation(latitude, longitude, function(result) {
            //After obtain the actual position of the user (Browser?), now we can create the map.
            initMap();
            //Then, search the taxi locations to show it
            obtainTaxisLocations();
        });
    }
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=API_VALID_KEY&libraries=places&callback=initializate"></script>

我有以下脚本。使用函数 setCoordinations 获取坐标，并使用该位置创建 map ，并使用 test 函数在用户键入以获取位置时设置监听器。显示了 map ，但是当我显示模式并在输入中写入时，不会执行自动完成。我以前使用过自动完成功能，但从未遇到过问题。事实是我不知道问题是什么，这让我发疯。欢迎任何帮助，非常感谢

编辑:我添加了setCooperatives函数。在此函数中，我调用 obtainUserPlaceLocation 来获取带有 lat、lng 参数的位置(字符串格式)，完成后，我创建 map 并搜索出租车(使用从 lat 获取的字符串位置的 Web 服务) ,lng) 放在 map 上。一切正常，除了自动完成放置输入之外。

Answer 1

我立即发现您没有加载 Google map '<script>正确标记。因此，当 Google 尝试操作您的 DOM 时，您会收到错误...请参阅 T.J Crowder's回答here至于为什么使用 <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 加载 Google map 脚本很重要

您几乎不允许执行正确的渲染才能成功执行脚本。

希望这有帮助!