谷歌API自动完成搜索框-HTML/JavaScript_Javascript_Html_Google Maps Api 3_Google Api_Google Api Java Client

谷歌API自动完成搜索框-HTML/JavaScript

javascript html google-maps-api-3 google-api

谷歌API自动完成搜索框-HTML/JavaScript,javascript,html,google-maps-api-3,google-api,google-api-java-client,Javascript,Html,Google Maps Api 3,Google Api,Google Api Java Client,我对HTML/JavaScript的了解非常有限，只是刚刚成功地在我的网站上实现了Google Place自动完成搜索框（没有地图）我需要两个使用GooglePlaceAutoComplete的输入，但是我使用的以下代码没有显示这两个输入字段，只有第二个（searchTextField2）有谁能给我一些建议，或者给我指出这个代码哪里出了问题任何帮助都将不胜感激 <!DOCTYPE html> <html> <head> <title> <

我对HTML/JavaScript的了解非常有限，只是刚刚成功地在我的网站上实现了Google Place自动完成搜索框（没有地图）

我需要两个使用GooglePlaceAutoComplete的输入，但是我使用的以下代码没有显示这两个输入字段，只有第二个（searchTextField2）

有谁能给我一些建议，或者给我指出这个代码哪里出了问题

任何帮助都将不胜感激

<!DOCTYPE html>
<html>
<head>
<title> </title>

<style>
#searchTextField {
position: absolute;
box-sizing: border-box;
z-index: 4;
height: 40px;
width: 360px;
left: 0px;
top: 0px;
border: 1px solid rgb(189, 189, 189);
background-color: rgb(255, 255, 255);
border-radius: 3px;
font-family: Roboto;
font-size: 18px;
font-weight: 500;
color: rgb(85, 85, 85);
padding: 0px 4px;
transition: border-color 200ms ease, box-shadow 200ms ease;
box-shadow: none;
  }

#searchTextField2 {
position: absolute;
box-sizing: border-box;
z-index: 4;
height: 40px;
width: 360px;
left: 0px;
top: 0px;
border: 1px solid rgb(189, 189, 189);
background-color: rgb(255, 255, 255);
border-radius: 3px;
font-family: Roboto;
font-size: 18px;
font-weight: 500;
color: rgb(85, 85, 85);
padding: 0px 4px;
transition: border-color 200ms ease, box-shadow 200ms ease;
box-shadow: none;
  }
</style>

</head>

<body>
<input id="searchTextField" type="text" size="50" placeholder="Pick-up Address" tabindex=2><br>
<input id="searchTextField2" type="text" size="50" placeholder="Destination" tabindex=3>


<script type="text/javascript">
function initMap() {
var input = document.getElementById('searchTextField');
var input = document.getElementById('searchTextField2');
var options = {
   // types: ['(cities)'],
   componentRestrictions: {country: 'uk'}//UK
};
var autocomplete = new google.maps.places.Autocomplete(input,options);
}
</script>

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

</body>
</html>


#searchTextField{
位置：绝对位置；
框大小：边框框；
z指数：4；
高度：40px；
宽度：360px；
左：0px；
顶部：0px；
边框：1px实心rgb（189189189189）；
背景色：rgb（255、255、255）；
边界半径：3px；
字体系列：Roboto；
字号：18px；
字号：500；
颜色：rgb（85,85,85）；
填充：0px 4px；
过渡：边框颜色轻松200毫秒，方框阴影轻松200毫秒；
盒影：无；
}
#searchTextField2{
位置：绝对位置；
框大小：边框框；
z指数：4；
高度：40px；
宽度：360px；
左：0px；
顶部：0px；
边框：1px实心rgb（189189189189）；
背景色：rgb（255、255、255）；
边界半径：3px；
字体系列：Roboto；
字号：18px；
字号：500；
颜色：rgb（85,85,85）；
填充：0px 4px；
过渡：边框颜色轻松200毫秒，方框阴影轻松200毫秒；
盒影：无；
}


函数initMap（）{
var input=document.getElementById（'searchTextField'）；
var input=document.getElementById（'searchTextField2'）；
变量选项={
//类型：['（城市）]，
组件限制：{country:'uk'}//uk
};
var autocomplete=new google.maps.places.autocomplete（输入，选项）；
}

您正在当前代码中声明

var input

function initMap() {
var input = document.getElementById('searchTextField');
var input2 = document.getElementById('searchTextField2');
var options = {
   // types: ['(cities)'],
   componentRestrictions: {country: 'uk'}//UK
};
var autocomplete = new google.maps.places.Autocomplete(input,options);
var autocomplete2 = new google.maps.places.Autocomplete(input2,options);
}

非常感谢保罗：-）