1

我真的很难将谷歌图表添加到谷歌地图信息窗口。所以，我在下面的帖子中从 Molle 博士（再次感谢伙伴）那里找到了非常宝贵的帮助。

使用 google maps api 将 google chart 添加到 infowindow

我现在的斗争是在信息窗口中添加多个图表。我已经设法通过其 innerHTML 连接每个容器并且它工作得很好，除了图表失去其功能的事实（不能使用鼠标悬停选项）。

这是我想出的使用 innerHTML 添加的代码，我想知道是否有办法保留图表功能。

   function drawChart(marker,map) {

    // Create the data table.
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Orange', 80],
      ['Apple', 55],
      ['Watermelon', 68]
    ]);

    var options = {
      width: 300, height: 150,
      redFrom: 0, redTo: 25,
      yellowFrom:26, yellowTo: 50,
      greenFrom:51, greenTo: 100,
      minorTicks: 5
    };


    var nodeGauge   = document.createElement('chart_div'),
        infoWindow  = new google.maps.InfoWindow(),
        nodeCol    = document.createElement('col_div');
        chart      = new google.visualization.Gauge(nodeGauge);
        colChart   =  new google.visualization.ColumnChart(nodeCol);


        colChart.draw(data,{});
        chart.draw(data, options);

        infoWindow.setContent(nodeGauge.innerHTML + nodeTab.innerHTML);
        infoWindow.open(map,marker);
  }
4

1 回答 1

1

我认为您可以<div>为每个图表创建一个，将它们都附加到另一个 div 标签，并将其设置为InfoWindow的内容。

var nodeGauge   = document.createElement('div'),
    infoWindow  = new google.maps.InfoWindow(),
    nodeCol    = document.createElement('div'),
    parentDiv  = document.createElement('div');
    chart      = new google.visualization.Gauge(nodeGauge);
    colChart   =  new google.visualization.ColumnChart(nodeCol);

parentDiv.appendChild(nodeGauge);
parentDiv.appendChild(nodeCol);

colChart.draw(data,{});
chart.draw(data, options);

infoWindow.setContent(parentDiv);
infoWindow.open(map,marker);
于 2013-02-05T17:46:28.747 回答