amCharts 4中mapImage上的Click事件

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添加click事件，但是单击时我需要地图缩放并居中于标记。

Answer 1

由于您使用的是custom HTML map markers，因此您希望将点击事件与通过香草JS或jQuery进行的绑定。

在其点击事件处理程序中，如果您引用了与其关联的MapImage，则可以尝试chart.zoomToMapObject(mapImageReferenceHere);（请参见指南“ Zooming to map area on click”）。您可能需要调整HTML标记的位置，以便使其沿mapImage更好地居中。

派生我们的演示，您需要在createCustomMarker函数中添加以下内容：

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

在此处查看叉子：

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

PS

您希望将事件放置在imageSeries.mapImages.events.on上，而不是template上。请查看我们关于amCharts v4中List Templates概念的指南。