google-maps - 使用 google map api 将 google 图表添加到信息窗口

Question

我见过很多人有同样的问题，但找不到答案。我有一个使用 Google Maps Javascript api v3 构建的简单 map 。该 map 有一些标记，这些标记链接到信息窗口以显示每个标记的特定信息。我想将谷歌图表添加到信息窗口，但不知道该怎么做。我浏览了我能找到的每一篇文章(在这里和其他论坛)，我注意到其他人试图做类似的事情，但似乎没有具体的答案。我注意到人们使用融合表成功地完成了这样的事情，但这不是我的情况，因为我从 MySQL 表加载数据。现在我有一个简单的 map ，代码如下所示:

  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 属性中添加一个容器 ()，然后调用创建图表的外部函数。这似乎不起作用，因为该函数看不到容器。我还尝试按照本文的建议将图表的完整代码嵌入到 setContent 属性中:

using google chart tools in a google maps api infowindow content string

我成功地执行了代码，没有错误，但是没有显示任何内容。另一种方法是在另一个 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/