单击地图上的事件图像 amCharts 4.

Question

我使用以下指南向我的地图添加了一个自定义标记： https://www.amcharts.com/demos/custom-html-elements-map-markers/但我一生都无法弄清楚如何向此标记添加点击事件！

我尝试了以下方法，但没有结果：

imageSeries.mapImages.events.on("hit", function(ev) { console.log("clicked on ", ev.target); }, this);

我可以使用 jQuery 添加单击事件，但是我需要在单击时缩放地图并居中到标记。

Answer 1

由于您使用的是自定义HTML地图标记，因此您需要通过vanilla js或jQuery将点击事件与这些事件相关联。

在他们的 click 事件处理程序中，如果您有对其关联MapImage的引用，则可以尝试chart.zoomToMapObject(mapImageReferenceHere);(请参阅我们的指南"单击时缩放到地图区域"(。您可能需要调整 HTML 标记的位置，以便它们根据mapImage更好地居中。

分叉我们的演示，您只需向createCustomMarker函数添加以下内容：

  holder.addEventListener("click", function(event) {
    chart.zoomToMapObject(image);
  });

请参阅此处的分叉：

https://codepen.io/team/amcharts/pen/15dbf72f74b61fb83cd0754a96fa2c49

附言

而不是imageSeries.mapImages.events.on你想把事件放在template上，即 imageSeries.mapImages.template.events.on("hit", function(ev) { ... } ); .请查看我们关于 amCharts v4 中列表模板概念的指南。

Answer 2

我认为

该事件是在模板上触发的。所以我使用了以下方法——

要创建指针 -创建映像系列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("hit"， function(e( {console.log("clicked on："，e(;}(;