如何使我的 Leaflet js 地图上的每个标记在悬停并单击时运行某个功能

Question

我有一个包含点对象的数组，我从中绘制我的标记。

    var Allpoints=[{
           "names":"first", "eastings":556568, "northings":446445, "description": "aijaskj jnrkajra skjanjanek ", "elevations": 5668, "LatLong": [10.769869, -2.337035]
},

{
    "names":"first", "eastings":556568, "northings":446445, "description": "aijaskj jnrkajra skjanjanek ", "elevations": 5668, "LatLong":[10.387760, -0.448079]
},

{
    "names":"first", "eastings":556568, "northings":446445, "description": "aijaskj jnrkajra skjanjanek ", "elevations": 5668, "LatLong":[9.104698, -0.882039]
},

{
    "names":"first", "eastings":556568, "northings":446445, "description": "aijaskj jnrkajra skjanjanek ", "elevations": 5668, "LatLong":[5.580339, -2.266316]
},

{
    "names":"first", "eastings":556568, "northings":446445, "description": "aijaskj jnrkajra skjanjanek ", "elevations": 5668, "LatLong":[8.050960, -1.247334]
},


{
    "names":"first", "eastings":556568, "northings":446445, "description": "aijaskj jnrkajra skjanjanek ", "elevations": 5668, "LatLong":[5.142810, -1.961445]
},


{
    "names":"first", "eastings":556568, "northings":446445, "description": "aijaskj jnrkajra skjanjanek ", "elevations": 5668, "LatLong":[6.115865, 0.082012]
},
        
    ];

绘制标记的图片

我绘制数组中的所有点， // //自动绘制所有先前的标记

for (obj in Allpoints){
    _newMarker = L.marker(Allpoints[obj].LatLong, 
        {title: Allpoints[obj].names,
            riseOnHover: true,           
        },
        ).addTo(mymap);
    allMarkers.push(_newMarker);


    // not working i.e. THIS IS THE PROBLEM
    _newMarker.addEventListener('click', markerDetails(_newMarker))

}

然后我想为所有制造商添加一个事件侦听器，以便在单击它时，一个函数将获取当前点的详细信息并将其显示在我创建的 HTML 窗格中。

    function markerDetails(currentMarker){
        $("#returnControlName").html(currentMarker.controlName);
        $("#returnControlEastings").html(controlEastings);
        $("#returnControlNorthings").html(controlNorthings);


}

问题是，我似乎无法添加一个事件侦听器来侦听每个事件并检索该标记的数据并将其显示在窗格上。 任何有关如何解决此问题的帮助都会得到缓解。

Answer 1

问题是，当您在侦听器中添加一个函数并添加到函数() 时，它会直接执行，而不是在执行侦听器时执行。

所以正确的是：_newMarker.addEventListener('click', markerDetails)

将您的代码更改为：

for (obj in Allpoints){
    _newMarker = L.marker(Allpoints[obj].LatLong, 
        {title: Allpoints[obj].names,
            riseOnHover: true,           
        },
        ).addTo(mymap);
    _newMarker.data = Allpoints[obj]; // save the objectData on the marker
    allMarkers.push(_newMarker);

    _newMarker.on('click', markerDetails);
}

function markerDetails(e){
        var currentMarker = e.target;
        var obj = currentMarker.data; //your objectData
        $("#returnControlName").html(currentMarker.controlName);
        $("#returnControlEastings").html(controlEastings);
        $("#returnControlNorthings").html(controlNorthings);


}