谷歌中的正确事件用鼠标自动完成选择

Posted 2023-05-09

【中文标题】谷歌中的正确事件用鼠标自动完成选择

【英文标题】：proper event in google places autocomplete select with mouse

【发布时间】：2013-06-13 18:43:48

【问题描述】：

我正在使用 google 的自动完成 api，就像在文档中一样，它可以工作 美好的。 但是，每次更改时，我都会使用 ajax 提交一个表单。 它工作正常，但是当我使用自动完成的位置时 鼠标（点击选择一个地方）。 在设置位置之前触发onchange并提交表单。

如何阻止这种行为？ 我的意思是在鼠标点击自动完成后提交。

这里有一个例子：http://jsfiddle.net/8GnZB/2/

     $(document).ready(function () 
         $location_input = $("#location");
         var options = 
             types: ['(cities)'],
             componentRestrictions: 
                 country: 'be'
             
         ;
         autocomplete = new 
google.maps.places.Autocomplete($location_input.get(0), options);
         $("#search_form input").change(function () 
             var data =  $("#search_form").serialize();
             /* Serialize form & send it to the search view */
             show_submit_data(data);
             return false;
         );
     );

     function show_submit_data(data) 
         $("#result").html(data);
     

     <script type="text/javascript" 
src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
     <form id="search_form" action="" method="post" >location :
         <input id="location" name="location" type="text" />
         <br/>data:
         <input id="data" name="data" type="text" />
     </form>Sent data :
     <div id="result"></div>

到目前为止，我设法解决的唯一问题是 change() 事件超时，但这有点难看。

【参考方案1】：

要解决您的问题，您需要为输入绑定正确的事件，请记住该库有自己的事件。

你使用的对象是自动完成的

autocomplete = new google.maps.places.Autocomplete($location_input.get(0), options); 

现在你可以绑定事件place_changed，它在你需要的时候触发，此时你可以控制你需要的任何东西。

google.maps.event.addListener(autocomplete, 'place_changed', function() 
    var data = $("#search_form").serialize();
    console.log('blah')
    show_submit_data(data);
);

这是一个活生生的例子 http://jsfiddle.net/8GnZB/7/

【讨论】：

太棒了，我也试过了，但不知怎么做错了，非常感谢；）

autocomplete.getPlace() 还将为您提供有关用户在回调函数中选择的位置所需的所有信息

这里可以用另一个函数来获取选中的数据autocomplete.getPlace()

【参考方案2】：

您可以使用下面的代码来监听点击事件

    let input = document.getElementById('searchTextField'); // the input field id from html file
    let autocomplete = new google.maps.places.Autocomplete(input);
    google.maps.event.addListener(autocomplete, 'place_changed', () => 
        let place = autocomplete.getPlace();
        console.log(place); // You will get complete data
        // If you want to move your map center to the searched lat long position. Use below any one
        // (with animation)
        this.gmap.panTo( lat: place.geometry.location.lat(), lng: place.geometry.location.lng() ); 
        // (without animation)
        this.gmap.setCenter( lat: place.geometry.location.lat(), lng: place.geometry.location.lng() ); 
    );

【参考方案3】：

要解决这个问题，你必须添加监听器，让你可以通过鼠标点击来选择位置。

在 angular2+ 上完美运行

这里是代码

   let input1=document.getElementsByTagName('input')[0];
   let autocomplete1 = new google.maps.places.Autocomplete(input1, 
    types: ["address"]
  );


  this.ngZone.run(() =>  
    autocomplete1.addListener('place_changed', function() 
      let place1=autocomplete1.getPlace();
        this.pickup=place1.formatted_address;              
        console.log(this.pickup);
  )
          )

确保在 ngOnInit() 中运行整个代码 并导入 ngZone 类并在构造函数中声明它 否则 ngZone 显示错误。