Javascript 谷歌自动完成，基于第一个结果的第二个输入_Javascript_Google Maps_Autocomplete

Javascript 谷歌自动完成，基于第一个结果的第二个输入

javascript google-maps autocomplete

Javascript 谷歌自动完成，基于第一个结果的第二个输入,javascript,google-maps,autocomplete,Javascript,Google Maps,Autocomplete,我需要一些谷歌自动完成功能的帮助。我是一个后端开发人员，所以我在前端不是很好：D 我有2个自动完成输入（取货地址和寄存地址）。我们在柏林有工作区，因此，如果用户在柏林地区内键入收件地址，收件地址可以是世界上任何地方。如果用户在收件输入中键入柏林以外的地址，收件只需要在柏林地区我写了一些类似的东西，但真的很难看，不能正常工作 var polygon; var bounds; async function autocompletePickup() { polygon

我需要一些谷歌自动完成功能的帮助。我是一个后端开发人员，所以我在前端不是很好：D

我有2个自动完成输入（取货地址和寄存地址）。我们在柏林有工作区，因此，如果用户在柏林地区内键入收件地址，收件地址可以是世界上任何地方。如果用户在收件输入中键入柏林以外的地址，收件只需要在柏林地区

我写了一些类似的东西，但真的很难看，不能正常工作

  var polygon;
  var bounds;

  async function autocompletePickup() {
   
    polygon = new google.maps.Polygon({
      path: area,
      geodesic: true,
      strokeColor: '#FFd000',
      strokeOpacity: 1.0,
      strokeWeight: 4,
      fillColor: '#FFd000',
      fillOpacity: 0.35
    });

    var input = document.getElementById('pickup-address11');

    var autocomplete = new google.maps.places.Autocomplete(input);

      autocomplete.addListener('place_changed', function() {
        var place = autocomplete.getPlace();
    
        if (google.maps.geometry.poly.containsLocation(place.geometry.location, polygon)) {
          alert('The address is within'); 
          autocompleteDrop(1);
        } else {
          // alert('The address is outside of the area.'); 
          // input.value = "";
          // autocompleteDrop(withinArea=false);
        };
     });  
  }  


  async function autocompleteDrop(withinArea) {

    var inside = withinArea;
      
    polygon = new google.maps.Polygon({
      path: area,
      geodesic: true,
      strokeColor: '#FFd000',
      strokeOpacity: 1.0,
      strokeWeight: 4,
      fillColor: '#FFd000',
      fillOpacity: 0.35
    });

    if (inside === 1) {
      var input = document.getElementById('dropoff-address22');
      autocomplete = new google.maps.places.Autocomplete(input, options);
      input.addEventListener("change", function() {
          // input.value = "";
          console.log(inside);
      });
    } else {
      var input = document.getElementById('dropoff-address22');
      var autocomplete = new google.maps.places.Autocomplete(input);
      autocomplete.addListener('place_changed', function() {
          var place = autocomplete.getPlace();
          
          if (google.maps.geometry.poly.containsLocation(place.geometry.location, polygon)) {
            
          } else {
            alert('The drop off address is outside of our area.'); 
            input.value = "";
          };
       }); 
    } 
  }

  // berlin area
  var area = [
    { lat: 53.804069, lng: 14.124429 },
    { lat: 52.016925, lng: 13.959028 },
    { lat: 52.037322, lng: 11.438104 },
    { lat: 52.888570, lng: 8.804136 },
    { lat: 54.148454, lng: 9.626415 }
  ];

很抱歉英语不好

我对Google Places API不太熟悉，但我希望以下内容可能对解决这个问题有用。当前，如果认为上下车位置有效，则以下代码将仅显示一个视觉指示器（更改文本字段背景颜色）

<!doctype html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Google Maps: Places Auto-complete Berlin</title>
        <style>
            body,body *{box-sizing:border-box;font-family:monospace}
            #map{
                width:800px;
                height:600px;
                float:none;
                margin:auto;
            }
            form{width:800px;float:none;margin:1rem auto;}
            input{padding:0.5rem;}
            .ok{background:rgba(0,255,0,0.25);color:black}
            .bogus{background:rgba(255,0,0,0.25);color:white}
            label{display:inline-block;width:calc(50% - 4px);clear:none;margin:auto;}
        </style>
        <script>
            function initMap(){
                const oPick=document.querySelector('input[type="text"][name="pick"]');
                const oDrop=document.querySelector('input[type="text"][name="drop"]');
                const oResults=[];
                
                const BerlinRegion = [
                    { lat: 53.804069, lng: 14.124429 },
                    { lat: 52.016925, lng: 13.959028 },
                    { lat: 52.037322, lng: 11.438104 },
                    { lat: 52.888570, lng: 8.804136 },
                    { lat: 54.148454, lng: 9.626415 }
                ];
                
                /* create basic map */
                const latlng=new google.maps.LatLng( 0, 0 );
                const options = {
                    zoom: 1,
                    center:latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                const map=new google.maps.Map( document.getElementById('map'), options );
                const bounds=new google.maps.LatLngBounds();
                
                
                /* ensure we see the BerlinArea entirely */
                BerlinRegion.forEach( obj=>{
                    bounds.extend( obj );
                });
                map.fitBounds( bounds );
                
                /* display the area of operations */
                let polygon = new google.maps.Polygon({
                    path: BerlinRegion,
                    geodesic: true,
                    strokeColor: '#00FF00',
                    strokeOpacity: 1.0,
                    strokeWeight: 2,
                    fillColor: '#00FF00',
                    fillOpacity: 0.1,
                    map:map
                }); 
                
                
                const changehandler=function(){
                    // the same event handler can perform this task for both pickup & dropoff
                    let res=google.maps.geometry.poly.containsLocation( this.getPlace().geometry.location, polygon );
                    return testresults( res );
                };
                const addresult=function( res ){
                    // if the array is longer than 2, remove elements from the start of the array
                    while( oResults.length >= 2 )oResults.shift();
                    // add new item
                    oResults.push( res );
                };
                const testresults=function(r){
                    addresult(r);
                    
                    let b=false;//default return value
                    let a=[ ...new Set( oResults ) ];// create an array of unique elements using the `splat` operator and `Set`
                    if( oResults.length==2 ) b=a.length==2; // to be valid we need true & false in the array - hence a length of 2
                    if( oResults.length==2 )indicate( b ); // let user know selection is valid / invalid
                    return b;
                };
                const indicate=function(status){
                    [oPick,oDrop].forEach(el=>{
                        el.className=status ? 'ok' : 'bogus'
                    })
                };
                
                
                new google.maps.places.Autocomplete( oPick ).addListener('place_changed',changehandler);
                new google.maps.places.Autocomplete( oDrop ).addListener('place_changed',changehandler);
            }
        </script>
        <script async defer src='//maps.googleapis.com/maps/api/js?key=apikey&callback=initMap&libraries=places'></script>
    </head>
    <body>
        <div id='map'></div>
        <form>
            <label>Collect from:<input type='text' name='pick' /></label>
            <label>Deliver to:<input type='text' name='drop' /></label>
        </form>
    </body>
</html>


谷歌地图：自动完成柏林的位置
正文，正文*{框大小：边框框；字体系列：monospace}
#地图{
宽度：800px；
高度：600px；
浮动：无；
保证金：自动；
}
表格{宽度：800px；浮点：无；边距：1rem auto；}
输入{填充：0.5rem；}
.ok{背景：rgba（0255,0,0.25）；颜色：黑色}
.pogus{背景：rgba（255,0,0,0.25）；颜色：白色}
标签{显示：内联块；宽度：计算（50%-4px）；清除：无；边距：自动；}
函数initMap（）{
const oPick=document.querySelector（'input[type=“text”][name=“pick”]”）；
const oDrop=document.querySelector（'input[type=“text”][name=“drop”]”）；
常量oResults=[]；
康斯特柏林地区=[
{lat:53.804069，lng:14.124429}，
{lat:52.016925，lng:13.959028}，
{lat:52.037322，lng:11.438104}，
{lat:52.888570，lng:8.804136}，
{拉丁美洲：54.148454，液化天然气：9.626415}
];
/*创建基本地图*/
const latlng=new google.maps.latlng（0,0）；
常量选项={
缩放：1，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
const map=new google.maps.map（document.getElementById（'map'），选项）；
const bounds=new google.maps.LatLngBounds（）；
/*确保我们能完全看到柏林地区*/
BerlinRegion.forEach（obj=>{
扩展边界（obj）；
});
映射边界（bounds）；
/*显示操作区域*/
让多边形=新建google.maps.polygon({
路径：柏林地区，
测地线：正确，
strokeColor:“#00FF00”，
笔划不透明度：1.0，
冲程重量：2，
填充颜色：'#00FF00'，
填充不透明度：0.1，
地图：地图
}); 
const changehandler=函数（）{
//相同的事件处理程序可以为拾取和释放执行此任务
让res=google.maps.geometry.poly.containsLocation（this.getPlace（）.geometry.location，polygon）；
返回测试结果（res）；
};
const addresult=函数（res）{
//如果数组长度大于2，请从数组的开头删除元素
而（oResults.length>=2）oResults.shift（）；
//添加新项目
oResults.push（res）；
};
常量testresults=函数（r）{
addresult（r）；
设b=false；//默认返回值
设a=[…new Set（oResults）]；//使用`splat`运算符和`Set创建一个唯一元素数组`
如果（oResults.length==2）b=a.length==2；//数组中需要true和false，因此长度为2
if（oResults.length==2）指示（b）；//让用户知道选择有效/无效
返回b；
};
常量指示=功能（状态）{
[oPick，oDrop].forEach（el=>{
el.className=状态？'ok'：'bogus'
})
};
新的google.maps.places.Autocomplete（oPick.addListener（'place\u changed'，changehandler））；
新的google.maps.places.Autocomplete（oDrop.addListener（'place\u changed'，changehandler））；
}
收款人：
交付给：

它几乎完美无瑕，我如何让它等待第二次输入？现在只在完成第一次输入后显示警报。我会有一个小想法。非常感谢！也许考虑投票/接受答案？！完成了，很抱歉没有做