无法在信息窗口 google 地图 api 中显示与标记相同的数据 (v3)

Question

我想在信息窗口 google 地图中显示 amcharts，但我的图表无法在信息窗口中循环显示数据。如果我点击marker 1 data ratio无法显示，点击marker 2 data ratio marker 1可以显示，marker 2无法显示

Codepen.ioMy Code

如何显示与标记相同的数据信息窗口。

Answer 1

AmChart的makeChart方法要求第一个参数指定的ID在DOM中存在，否则将无法使用。您在信息 window 甚至附加到 DOM 之前调用 initAmCharts，因此您需要向信息 window 添加一个 domready 侦听器并调用 makeChart 那里。您还想附加一个 close 侦听器来清除图表实例以节省资源，但是您需要在 domready 事件期间克隆图表数据，以便清除不会彻底删除它们。

这是在保留数据的同时添加和清除图表的代码。我删除了轮班电话，因为它们看起来多余，并且在重新打开信息时也打破了图表window:

      var chartLine;
      var chartWa;
      google.maps.event.addListener(infowindow, 'domready', function() {
        var line_data_copy = JSON.parse(JSON.stringify(item.line_data_chart));
        var wa_data_copy = JSON.parse(JSON.stringify(item.wa_data_chart));
         chartLine = initAmChart("divChartLine", colors_line, line_data_copy);
         chartWa = initAmChart("divChartWa", colors_wa, wa_data_copy);

          chartLine.allLabels[0].text = item.line_ratio+"%";
          chartLine.validateData();       

          chartWa.allLabels[0].text = item.wa_ratio+"%";
          chartWa.validateData();       
      });

      google.maps.event.addListener(infowindow, 'close', function() {
        chartLine.clear();
        chartWa.clear();
      })

Updated codepen

无法在信息窗口 google 地图 api 中显示与标记相同的数据 (v3)

can't display data same with marker in infowindow google maps api (v3)

javascript

json

google-maps

google-maps-api-3

amcharts