reactjs 如何使用开发工具查看活动的GoogleMap事件?

vsnjm48y  于 2023-05-22  发布在  React
关注(0)|答案(1)|浏览(115)

谷歌Map似乎有自己的event listener system。如何在开发工具中查看这些侦听器?对于我的生活,我不能找到它的正常方式下元素>事件侦听器。
我使用React,在useEffect()清理中,删除侦听器对我来说是有意义的。因此,我希望确保安装和拆卸工程正确。过去,当我未能做到这一点时,我与其他侦听器发生了内存泄漏。这就是背景。

3htmauhk

3htmauhk1#

可以查看添加监听器的对象

例如,您可以在控制台中登录已创建的标记,并通过marker.__e3_.click深入了解其事件侦听器对象。
下面是一个示例代码,它显示了一个标记的对象,如果它有一个事件监听器或没有:

// instantiate the marker
    marker = new Marker({
        map,
        draggable: true,
        position: {lat: -34.397, lng: 150.644},
    })
    
    // This adds a click event listener to your marker 
    let markerListenerEvent = event.addListener(marker, "click", function() {
        alert("you have clicked the marker!")
    });
    
    // this will show in the console that 
    // the marker now have a click event listener.
    console.log("clickable marker: ");
    console.log(marker.__e3_.click[64].So);
    // this will return "true"
    
    
  // clicking on the map will then remove the listener you put
    // on the marker
    let mapListenerEvent = event.addListener(map, "click", function() {
        alert("You have now removed the marker event listener!")
        // This is the the method that removes the listener for marker above
        event.removeListener(markerListenerEvent);
        
        // this will show in the console that 
        // the marker now don't have a click event listener
        // since the "click" object will now be empty.
        console.log("not clickable marker: ");
        console.log(marker.__e3_.click);
        // this will return an empty object because the listener has been removed
    })

如果你没有使用Google Maps React Library,而只是使用ReactJS,这应该可以正常工作。
下面是一个概念验证片段,您可以使用它(请使用您自己的API KEY):https://jsbin.com/jovajor/1/edit?html,js,output

  • 注意:我使用了外部Playground,以便您可以检查控制台。*

希望这有帮助!

相关问题