完全删除GoogleMaps自动填充功能的正确方法是什么?

Eri*_*rik 7 javascript google-maps google-maps-api-3 google-maps-api-2

我使用GoogleMap v3 AutoComplete,我需要完全删除它并取消绑定所有事件侦听器.我初始化和绑定事件的代码如下所示:

var autocomplete = new google.maps.places.Autocomplete($("input").get(0), {
   types: ["geocode"]
});

google.maps.event.addListener(autocomplete, 'place_changed', function () {
  // handle events
});
Run Code Online (Sandbox Code Playgroud)

我找不到正式删除自动完成并取消绑定所有事件的正式方法.请指出正确的方法.

谢谢.

Dr.*_*lle 9

对于解除事件的绑定使用google.maps.event.clearInstanceListeners.

为了删除自动完成功能,没有实现的方法.您可以在创建自动完成之前创建输入的克隆,并且当您想要删除自动完成功能时,请使用克隆替换当前输入.

//--------------------------------------------------------------
      //this overides the built-in Autocomplete and adds a remove-listener
      //execute it once when the API has been loaded
     (function(ac) {
         google.maps.places.Autocomplete = function(node, opts) {
           var clone = node.cloneNode(true),
             pac = new ac(node, opts);

           google.maps.event
             .addListener(pac,
               'remove',
               function(restore) {
                   google.maps.event.clearInstanceListeners(pac);
                   google.maps.event.trigger(node,'blur');
                   google.maps.event.clearInstanceListeners(node);
                 if (restore===true) {
                   node.parentNode.replaceChild(clone, node);
                 } else {
                   node.parentNode.removeChild(node)
                 }
               });
           return pac;

         }
       }
       (google.maps.places.Autocomplete));
//-------------------------------------------------------------------------- 

     function initialize() {

       autocomplete = new google.maps.places
         .Autocomplete(document.getElementsByTagName('INPUT')[0], {
           types: ["geocode"]
         });
     }

     google.maps.event.addDomListener(window, 'load', initialize);
Run Code Online (Sandbox Code Playgroud)
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&.js"></script>
<input/>
<span>
  <input  type="button"  value="remove input" 
          onclick="google.maps.event.trigger(window.autocomplete,'remove');
                   this.parentNode.parentNode.removeChild(this.parentNode);"/>
  <input  type="button"  value="remove autocomplete-functionality" 
          onclick="google.maps.event.trigger(window.autocomplete,'remove',true);
                   this.parentNode.parentNode.removeChild(this.parentNode);"/>
<span>
Run Code Online (Sandbox Code Playgroud)

该脚本为自动完成添加了一个删除侦听器.监听器接受单个参数.true当您只想删除自动完成功能时,将其设置为.否则输入将被完全删除.

  • 感谢您的完整回答。请解释以下方法的区别:`clearInstanceListeners`、`clearListeners` 和`removeListener`。我应该全部使用它们还是使用`clearInstanceListeners`就足够了? (2认同)
  • `removeListener`删除特定的侦听器,`clearListeners`删除给定对象的特定事件的所有侦听器,`clearInstanceListeners`删除给定对象的所有侦听器(无论事件类型如何)。使用`clearInstanceListeners`就足够了 (2认同)