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

Question

我正在尝试添加 Google 地点自动建议，我从开发人员网站复制了代码进行尝试，但收到错误： 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 中实现了同样的事情，它成功地工作了，但是当我在打开弹出窗口（具有 place-input 的表单）的单击按钮上使用它时，它给了我这个错误。

注意： 我也尝试过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 传递initializeAutocomplete 函数，如下所示：

<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到您的网址或不想添加 - 那么请考虑以下内容：

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

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