我有以下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服务)放在地图上。一切正常,除了自动填充地点输入。
答案 0 :(得分: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>
您几乎不允许执行正确的渲染,以便您成功执行脚本。
希望这有帮助!