Javascript 如何使我的传单js地图上的每个标记在悬停和单击时运行特定功能

Javascript 如何使我的传单js地图上的每个标记在悬停和单击时运行特定功能,javascript,leaflet,addeventlistener,markers,Javascript,Leaflet,Addeventlistener,Markers,我有一个包含点对象的数组,我从中绘制标记 var Allpoints=[{ "names":"first", "eastings":556568, "northings":446445, "description": "aijaskj jnrkajra skjanjanek ", "elevations": 5668, &quo

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

    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);


}
问题是,我似乎无法添加一个事件侦听器来侦听每个事件并检索该标记的数据并将其显示在窗格中。
关于如何解决这个问题的任何帮助都会减轻负担。

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

所以正确的答案是:
\u 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);


}

首先,谢谢你给我指引了正确的方向。虽然这似乎不能解决我的问题,但问题是,当单击特定标记时,我希望从包含所有对象的数组(Allpoints)中检索标记的详细信息,以便在HTML窗格中显示它们,我希望检索的详细信息包括:LatLong、Name、Northings、Easting和Elevation。var obj=currentMarker.data;不允许我访问标记的那些属性。如果您能再看一次并让我知道您的想法,我将不胜感激。应该有一个错误:
\u newMarker.data=Allpoints[obj]