使用google maps api将Google图表添加到infowindow

Question

我见过很多其他人有同样的问题,但找不到答案.我有一个使用Google Maps Javascript api v3构建的简单地图.地图有一些标记,它们链接到信息窗以显示每个标记的特定信息.我想将一个谷歌图表添加到infowindow但是却无法弄清楚如何做到这一点.我经历了我能找到的每一个帖子(这里和其他论坛),我注意到其他人试图做类似的事情,但似乎没有具体的答案.我注意到人们使用融合表做这样的事情是成功的,但这不是我的情况,因为我从MySQL表加载数据.现在我有一个简单的地图,代码如下所示:

  function initialize() {

    var mapOptions = {
      center: new google.maps.LatLng(-33.837342,151.208954),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

    var data = [
      ['Bondi Beach', -33.891044,151.275537],
      ['Cronulla Beach', -34.046544,151.159601],
    ];

    var myLatLng1 = new google.maps.LatLng(-33.891044,151.275537);
    var myLatLng2 = new google.maps.LatLng(-34.046544,151.159601);

    var marker1 = new google.maps.Marker({
        position: myLatLng1,
        map: map
    });

    var marker2 = new google.maps.Marker({
        position: myLatLng2,
        map: map
    });

    google.maps.event.addListener(marker1, 'click', function() {
      var infowindow1 = new google.maps.InfoWindow();
      infowindow1.setContent('Display the chart here');
      infowindow1.open(map, marker1);
    });

    google.maps.event.addListener(marker2, 'click', function() {
      var infowindow2 = new google.maps.InfoWindow();
      infowindow2.setContent('Display the chart here');
      infowindow2.open(map, marker1);
      infowindow2.setContent('Display the chart here');
      infowindow2.open(map, marker2);
    });          
  }    

这是一个简单图表的代码,例如:

https://google-developers.appspot.com/chart/interactive/docs/quick_start

我尝试了很多不同的方法,对我来说更明显的是在InfoWindow的setContent属性中添加一个container(),然后调用创建图表的外部函数.这似乎不起作用,因为该功能无法看到容器.我也尝试在setContent属性中嵌入图表的整个代码,如本帖所示:

在谷歌地图api infowindow内容字符串中使用谷歌图表工具

我设法执行代码没有错误,但没有显示任何内容.Anotther方法将在另一个html页面中创建图表,并以某种方式将此页面设置为setContent属性,也没有成功.

我即将放弃,因为我看不到这样做的方法.

我很感激任何帮助.

谢谢

何塞

Answer 1

这似乎不起作用,因为该功能无法看到容器.

您可以将容器作为参数传递给 drawChart()

但我想你想绘制填充了与标记相关的数据的图表,所以我建议将标记作为参数传递给drawChart()并在那里创建infoWindow.

示例代码(不实现与标记相关的数据,因为不清楚您想要绘制哪种数据)

       function drawChart(marker) {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

    // Set chart options
    var options = {'title':'Pizza sold @ '+
                           marker.getPosition().toString(),
                   'width':300,
                   'height':200};

    var node        = document.createElement('div'),
        infoWindow  = new google.maps.InfoWindow(),
        chart       = new google.visualization.PieChart(node);

        chart.draw(data, options);
        infoWindow.setContent(node);
        infoWindow.open(marker.getMap(),marker);
  }

用法:

google.maps.event.addListener(marker1, 'click', function() {
  drawChart(this);
});

演示:http://jsfiddle.net/doktormolle/S6vBK/