javascript - amCharts4数据变化不触发 map 重绘

Question

我正在使用 amcharts4作为 meteor 项目的一部分。目标是显示 map 并在 map 上显示 map 标记。每次数据更改时， map 标记都必须自行更新并指向新位置。

我试图重用已经存在的 available demo

我添加的唯一额外内容是将一组不同的数据重新分配给 imageSeries，以便更新 map 上的标记。

我有一个 jsfiddle演示发生了什么。 setTimeout 函数用于模拟 5 秒后的数据更改。

  setTimeout(function(){
        $('.map-marker').remove()
        imageSeries.data = [{
           "zoomLevel": 5,
           "scale": 0.5,
           "title": "Brussels",
           "latitude": 50.8371,
           "longitude": 4.3676
         }];
        imageSeries.validateData();
    }, 5000)

5 秒后数据发生变化。但在您手动平移 map 或放大/缩小 map 之前，新点不会显示在 map 上。

我该如何解决这个问题？

Answer 1

AmCharts 确实在重绘/更新后更新 map 。问题是您使用的是自定义 HTML 标记，而不是像 this demo 中那样只包含图像的 native 功能。 .由于您使用的是自定义设置，因此需要一个额外的步骤(顺便说一句，这是为 v3 编写的演示的一个端口，它也没有本地 HTML 标记)。

在演示中，updateCustomMarkers 负责首先将标记放置在 map 上。请注意，该演示通过将此方法附加到 map 实例的 mappositionchanged 事件来设置自定义标记，由于在创建时发生缩放/视口(viewport)定位，该事件也恰好在 map 初始化期间被调用。这也是您手动放大后只能看到标记的原因。您的数据更新超时不会调用 updateCustomMarkers，因此除非您随后手动调用该方法，否则不会绘制自定义标记；请注意，您也不需要在替换整个数组时调用 invalidateData。

setTimeout(function() {
  $('.map-marker').remove()
  imageSeries.data = [{
    "zoomLevel": 5,
    "scale": 0.5,
    "title": "Brussels",
    "latitude": 50.8371,
    "longitude": 4.3676
  }];
  updateCustomMarkers();
}, 5000)

请注意，使用原生图像时不需要此额外步骤，因为 map 会自动更新该场景中的标记。