删除事件侦听器答案

【问题标题】：Removing an Event listener删除事件侦听器
【发布时间】：2017-08-10 00:35:38
【问题描述】：

好的，我想做的是在我的谷歌地图顶部添加一个重置按钮。这样，当您调用路线并想要摆脱当前路线或只是清除地图并重新定位在起点时，这里是事件侦听器我正在使用

 controlUI.addEventListener('click', function() {
          map.setCenter(pyrmont),
		  map.setZoom(14),
		  directionsDisplay.setPanel(null),
		  directionsDisplay.setMap(null);		  		  
        });

并且一切正常，但是在按下“重置”按钮后，您将无法再执行任何方向，我猜这是因为我调用了我的两个方向 var 的 .setPanel 和 .setMap 并将它们都设置为 null 但它的事后不清除它们，这就是一个简单的删除事件监听器工作的问题？！如果是这样，我将如何写出来我尝试了几种方法，但它们似乎都没有正常工作。任何帮助或指针都会非常有帮助。

提前谢谢你，

特拉维斯

哦，这里是我在这里调用的 controlUI 函数

function CenterControl(controlDiv, map) {

        // Set CSS for the control border.
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = '#fff';
        controlUI.style.border = '2px solid #fff';
        controlUI.style.borderRadius = '3px';
        controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
        controlUI.style.cursor = 'pointer';
        controlUI.style.marginBottom = '22px';
        controlUI.style.textAlign = 'center';
        controlUI.title = 'Click to reset the map';
        controlDiv.appendChild(controlUI);

        // Set CSS for the control interior.
        var controlText = document.createElement('div');
        controlText.style.color = 'rgb(25,25,25)';
        controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
        controlText.style.fontSize = '16px';
        controlText.style.lineHeight = '38px';
        controlText.style.paddingLeft = '5px';
        controlText.style.paddingRight = '5px';
        controlText.innerHTML = 'Reset Map';
        controlUI.appendChild(controlText);

        // Setup the click event listeners: simply set the map to default.
        controlUI.addEventListener('click', function() {
          map.setCenter(pyrmont),
		  map.setZoom(14),
		  directionsDisplay.setPanel(null),
		  directionsDisplay.setMap(null);		  		  
        });
      }

【问题讨论】：

标签： javascript jquery events addeventlistener

【解决方案1】：

是否有理由调用null 而不仅仅是将地图重置为您最初渲染的内容？我认为这篇 SO 帖子会对您有所帮助。

Google map reset to initial state

【讨论】：

【解决方案2】：

好吧，回答标题问题。要删除事件侦听器，您只需执行以下操作： EventTarget.removeEventListener

试试看https://developer.mozilla.org/enUS/docs/Web/API/EventTarget/removeEventListener

我希望这会有所帮助。

【讨论】：

【解决方案3】：

所以我只是在重置功能本身内完全召回/重新创建地点服务和方向渲染器

controlUI.addEventListener('click', function() {
			map.setCenter(pyrmont),
			map.setZoom(14),
			directionsDisplay.setMap(null);
			directionsDisplay.setPanel(null);
			service = new google.maps.places.PlacesService(map);
			directionsDisplay = new google.maps.DirectionsRenderer;
			directionsDisplay.setMap(map);
			directionsDisplay.setPanel(document.getElementById('directionsPanel'));
			directionsService = new google.maps.DirectionsService;	
		});

感谢您的帮助。

【讨论】：