gpt4 book ai didi

javascript - Google Maps API 自动完成搜索,无需从下拉列表中选择

转载 作者:数据小太阳 更新时间:2023-10-29 04:03:02 28 4
gpt4 key购买 nike

<分区>

我正在使用 Google Maps API 和自动完成搜索功能。目前,您必须开始输入位置(城市、州、邮政编码等),然后从下拉列表中选择一个结果,以便 map 以该位置为中心。但是,我想做一个万无一失的证明并设置它,这样如果有人只键入一个城市或一个州并点击“输入”而不选择自动完成结果,它仍然有效。例如,如果有人键入“纽约”并点击“回车”而没有在下拉列表中选择结果,它仍将以纽约为中心。

如果没有手动选择,我假设这是通过从自动完成下拉列表中获取第一个结果来完成的。

我已经为表单的提交添加了一个事件监听器,但不确定如何将第一个结果传递到“place”变量。

这是我的代码:

function searchBar(map) {
var input = document.getElementById('search-input');
var searchform = document.getElementById('search-form');
var place;
var options = {componentRestrictions: {country: 'us'}};
var autocomplete = new google.maps.places.Autocomplete(input, options);

//Add listener to detect autocomplete selection
google.maps.event.addListener(autocomplete, 'place_changed', function () {
place = autocomplete.getPlace();
center = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng());
map.setCenter(center);
map.setZoom(5);
});

//Add listener to search
searchform.addEventListener('submit', function() {
center = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng());
map.setCenter(center);
map.setZoom(5);
});

//Reset the inpout box on click
input.addEventListener('click', function(){
input.value = "";
});
};

这是一个 JSFiddle用于实验。

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com