как заставить каждый из маркеров на моей карте js-листовки запускать определенную функцию при наведении курсора мыши и нажатии на нее

#javascript #leaflet #addeventlistener #markers

#javascript #листовка #addeventlistener #маркеры

Вопрос:

У меня есть массив, содержащий объекты points, из которых я строю свои маркеры.

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


}
  

проблема в том, что я не могу добавить прослушиватель событий, который будет прослушивать каждый из них, извлекать данные этого маркера и отображать их на панели.
Любая помощь в решении этой проблемы принесет облегчение.

Ответ №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);


}
  

Комментарии:

1. Прежде всего, спасибо, что направили меня в правильном направлении. Хотя это, похоже, не решает мою проблему, проблема в том, что при нажатии на конкретный маркер я хочу получить сведения о маркере из массива (Allpoints), содержащего все объекты, чтобы я мог отображать их на панели HTML, детали, которые я хочу получить, включают,Длина, название, север, Восток и высота. var obj = currentMarker.data; не дает мне доступа к этим свойствам маркера. Я был бы признателен, если бы вы могли любезно взглянуть на него еще раз и сообщить мне, что вы думаете.

2. Произошла ошибка, которая должна быть: _newMarker.data = Allpoints[obj]