ne peut pas afficher les mêmes données avec le marqueur dans infowindow google maps api (v3)

Question

Je veux afficher des amcharts dans l'infowindow google maps, mais mes cartes ne peuvent pas boucler des données dans infowindow. Si je clique sur le marqueur 1, le rapport de données ne peut pas afficher et cliquez sur le marqueur 2 Le ratio de données 1 peut être affiché, mais le marqueur 2 ne peut pas afficher.

Codepen.ioMy Code

Comment afficher les données InfoWindow même avec un marqueur.

Answer 1

La méthode makeChart d'AmChart requiert que l'ID spécifié dans le premier paramètre existe dans le DOM, sinon il ne fonctionnera pas. Vous appelez initAmCharts avant même que la fenêtre d'informations ne soit rattachée au DOM. Vous devez donc ajouter un écouteur domready à l'infowindow et y appeler makeChart. Vous souhaitez également attacher un écouteur close pour effacer les instances de graphique afin de conserver les ressources, mais vous devez cloner les données de votre graphique pendant l'événement domready afin que la suppression ne les efface pas complètement.

Voici le code qui ajoute et efface le graphique tout en préservant vos données. J'ai enlevé le changement appelle comme ils semblaient redondants et également cassé le tableau lors de la réouverture du infowindow:

 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