#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]