Нажмите событие на mapImage в amCharts 4
Я добавил пользовательский маркер на свою карту, используя следующее руководство: https://www.amcharts.com/demos/custom-html-elements-map-markers/, но я не могу понять, как добавить событие клика к этому маркеру!
я пробовал следующее безрезультатно:
imageSeries.mapImages.events.on("hit", function(ev) {
console.info("clicked on ", ev.target);
}, this);
Я могу добавить событие щелчка с помощью jQuery, однако мне нужно, чтобы карта увеличивалась и центрировалась по маркеру при нажатии.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Поскольку вы используете пользовательские маркеры карты HTML, вам нужно связать события кликов с ними, будь то с помощью vanilla js или jQuery.
В их обработчиках кликов, если у вас есть ссылка на связанный с ними MapImage, вы можете попробовать chart.zoomToMapObject(mapImageReferenceHere); (см. наше руководство «Масштабирование области карты по клику»). Возможно, вам придется отрегулировать положение маркеров HTML, чтобы они лучше центрировались в соответствии с mapImage.
Разветвляя нашу демонстрацию, все, что вам нужно будет добавить, это следующее к функции createCustomMarker:
holder.addEventListener("click", function(event) {
chart.zoomToMapObject(image);
});
Смотрите вилку здесь:
https://codepen.io/team/amcharts/pen/15dbf72f74b61fb83cd0754a96fa2c49
PS
Вместо imageSeries.mapImages.events.on вы хотите размещать события на template, то есть imageSeries.mapImages.template.events.on("hit", function(ev) { ... } );. Пожалуйста, ознакомьтесь с нашим руководством по нашей концепции Шаблоны списков в amCharts v4.
Я думаю, что событие запускается в шаблоне. Поэтому я использовал следующий подход -
Для создания указателей - // Создаем серию изображений var imageSeries = chart.series.push(new am4maps.MapImageSeries());
// Create a circle image in image series template so it gets replicated to all new images
var imageSeriesTemplate = imageSeries.mapImages.template;
var circle = imageSeriesTemplate.createChild(am4core.Circle);
В моем случае мне нужны указатели в виде кругов.
Затем заполните нужные данные в серии изображений.
Триггерное событие - imageSeriesTemplate.events.on("попадание", function(e) {console.info("щелкнули:",e);});