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>

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

编辑：我添加setCoordinates功能。在这个函数中，我调用obtainUserPlaceLocation获取带有lat，lng参数的位置（String格式），完成后我创建地图并搜索出租车（使用从lat，lng获得的字符串位置的Web服务）放在地图上。一切正常，除了自动填充地点输入。

Answer 1

立即开始，我可以看到您没有正确加载Google地图的<script>代码。因此，当Google尝试操作您的DOM时，您会收到错误...请参阅T.J Crowder's answer here，了解为什么使用<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> <加载Google地图脚本非常重要/ p>

您几乎不允许执行正确的渲染，以便您成功执行脚本。

希望这有帮助！

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

1 个答案: