12

我正在使用谷歌的自动完成 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()事件超时，但有点难看。

4

3 回答 3

39

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

您正在使用的对象是自动完成的

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/

于 2013-06-19T22:30:04.037 回答
0

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

    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() }); 
    });
于 2020-08-13T08:43:03.210 回答
-1

要解决此问题，您必须添加侦听器，使您能够在鼠标单击时选择位置。

完美地工作在 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 会显示错误。

于 2018-08-14T11:42:23.007 回答