google.maps.event.addDomListener() 已弃用，请改用标准 addEventListener() 方法：Google Place 自动完成错误

Question

我正在尝试添加 Google place auto suggest，我从开发者网站复制了代码来尝试，但收到错误： google.maps.event.addDomListener() 已弃用，请使用标准的 addEventListener() 方法。 我也没有收到任何地点建议。

https://developers.google.com/maps/documentation/javascript/places-autocomplete

google.maps.event.addDomListener(window, 'load', initializeAutocomplete);

我还添加了脚本

<script src="https://maps.googleapis.com/maps/api/jskey=api_key&libraries=places"></script>

我在一个html中实现了同样的事情，它成功地工作了，但是当我在打开弹出窗口的单击按钮上使用它时（具有位置输入的表单），它给了我这个错误。

注意：我也尝试过addEventListener但这给了我一个错误：

google.maps.event.addEventListener is not a function

您知道为什么我会收到此错误吗？我该如何解决此问题？

Answer 1

由于 addDomListener() 已被弃用，请改用标准的 addEventListener() 方法，您可以按如下方式执行此操作：

window.addEventListener('load', initializeAutocomplete)

在所有需要的地方以类似的方式更换。

google.maps.event.addDomListener(<OBJECT>,<EVENT>,<FUNCTION>); 

到

<OBJECT>.addEventListener(<EVENT>,<FUNCTION>);

Answer 2

这并不像用复制/粘贴“替换 addDomListener”那么简单。哈哈。那就太好了，对吧？

还应该注意的是，当您加载 Google Maps API 时，您可以通过 URL 传递初始化自动完成函数，如下所示：

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&libraries=places&callback=initAutocomplete'></script>

因此，只需将回调 GET var 添加到此 url 即可：

https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=initAutocomplete

在您的示例中只需添加

&callback=initAutocomplete

= 完成。

句号

让我们检查其他情况 - 考虑以下用法。这（来自旧的谷歌地图示例存档）将不再起作用：

 google.maps.event.addDomListener( radioButton, 'click', function() { 
    autocomplete.setTypes( ['establishment'] ); 
  // this causes google.maps.event.addDomListener() is deprecated warning
 });

这永远不会起作用因为没有

google.maps.event.addEventListener

 google.maps.event.addEventListener( radioButton, 'click', function() { 
    autocomplete.setTypes( ['establishment'] ); 
   });

// lands you: Uncaught TypeError: google.maps.event.addEventListener is not a function

你需要重新思考+重写如下：

document.getElementById(radioButton).addEventListener('click', function(e) {
    autocomplete.setTypes( ['establishment'] ); // yellowstone PARK
    autocomplete.setTypes( ['address'] ); // some address with yellowstone st
    });

现在这再次按预期工作，没有

google.maps.event.addDomListener() is deprecated

错误

因此，在您的情况下，如果您出于某种原因无法或不想将

&callback=initAutocomplete

添加到您的 URL 上 - 那么请考虑这一点：

// notworksolutions
google.maps.event.addDomListener(window, 'load', initializeAutocomplete);
google.maps.event.addEventListener(window, 'load', initializeAutocomplete);

// solution that work
window.addEventListener('load', (event) => { initializeAutocomplete(); });

Answer 3

这在 Google 地图问题跟踪器中标记为已修复。修复应该是即将发布的版本。

Answer 4

markerclusterer.js

1. 之前的代码

google.maps.event.addDomListener(this.div_, 'click', function(event) {
    // Only perform click when not preceded by a drag
    if (!isDragging) {
        that.triggerClusterClick(event);
    }
});

google.maps.event.addDomListener(this.div_, 'mousedown', function() {
    isDragging = false;
});

google.maps.event.addDomListener(this.div_, 'mousemove', function() {
    isDragging = true;
});

2. 新代码

  this.div_.addEventListener('click', function(event) {
    // Only perform click when not preceded by a drag
    if (!isDragging) {
      that.triggerClusterClick(event);
    }
  });
  this.div_.addEventListener('mousedown', function() {
    isDragging = false;
  });
  this.div_.addEventListener('mousemove', function() {
    isDragging = true;
  });