InfoWindow在Google地圖上的高度圖

Question

我想了解爲什麼在第一次點擊後圖表不會顯示在InfoWindow中。

正如您在第一次點擊任何標記時所看到的，圖表在InfoWindow中正確顯示，但在下一次點擊標記時，InfoWindow保持空白並且不顯示圖表。我想了解爲什麼它保持空白，並且如果每次點擊標記時都有可能修復它，則圖表將按預期顯示。

var marker, i; 
var contentDiv = '<div id="container" style="height:350px; width:350px"></div>'; 

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][2], locations[i][3]), 
     map: map, 
     title: locations[i][0]+ " (" + locations[i][1] + " stars)" 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
     var selectedname = locations[i][0]; 
     marker.setAnimation(google.maps.Animation.BOUNCE); 
     stopAnimation(marker); 
     $.ajax({ 
       success: function(data) { 
        iw.open(map, marker);      
        iw.setContent(contentDiv); 
        dataChart = { 
         chart: { 
          borderWidth: 2, 
          renderTo: document.getElementById('container'), 
          zoomType: 'x', 
          type:"spline", 
          height:350, 
          width:350, 
          marginRight:40 
         }, 
         title: { 
          text: 'Monthly Average Temperature', 
          x: -20 //center 
         }, 
         subtitle: { 
          text: 'Source: WorldClimate.com', 
          x: -20 
         }, 
         xAxis: { 
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
           'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
         }, 
         yAxis: { 
          title: { 
           text: 'Temperature (°C)' 
          }, 
          plotLines: [{ 
           value: 0, 
           width: 1, 
           color: '#808080' 
          }] 
         }, 
         tooltip: { 
          valueSuffix: '°C' 
         }, 
         legend: { 
          layout: 'vertical', 
          align: 'right', 
          verticalAlign: 'middle', 
          borderWidth: 0 
         }, 
         series: [{ 
          name: 'Tokyo', 
          data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
         }, { 
          name: 'New York', 
          data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
         }, { 
          name: 'Berlin', 
          data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
         }, { 
          name: 'London', 
          data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
         }] 
        } 
        chart = new Highcharts.Chart(dataChart); 
       } 

     }); 
      return false 
     } 
    }) 
    (marker, i)); 
} 

這裏是整個代碼的小提琴：http://jsfiddle.net/YRNHP/5/

謝謝你在前進， Pouyo

Answer 1

這是一個時機的問題。

您致電iw.setContent(contentDiv);，然後立即致電Highcharts。 Highcharts正在對contentDiv變量中的元素起作用，但是它已成爲DOM的一部分嗎？當您重複使用InfoWindow時，它會從上次調用中移除它的一部分，但它會被換出; Highcharts使用什麼？

我一個domready事件添加到您的信息窗口（你知道contentDiv插入和可用這種方式），並用它來初始化的Highchart

google.maps.event.addListener(iw,'domready',function(){ 
    // draw chart here 
}); 

// later on ... 

iw.open(map, marker);     
iw.setContent(contentDiv); // when contentDiv is part of DOM above function fires 

見udpated小提琴here。