如何使我的 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);


}

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

how to make each of the markers on my Leaflet js map run a certain function when it is hovered and clicked on

javascript

leaflet

addeventlistener

markers

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

how to make each of the markers on my Leaflet js map run a certain function when it is hovered and clicked on

javascript

leaflet

addeventlistener

markers

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