1

我已经使用以下指南在我的地图中添加了一个自定义标记：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 添加一个单击事件，但是我需要在单击时将地图缩放并居中到标记。

4

2 回答 2

1

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

在他们的 click 事件处理程序中，如果您有对其关联的引用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

附言

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

于 2019-06-15T00:14:35.337 回答
0

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

创建指针 - // 创建图像系列 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);});

于 2022-01-11T14:07:32.953 回答