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属性中添加一个容器（）然后调用创建图表的外部函数。这似乎不起作用，因为该功能无法看到容器。我也尝试在setContent属性中嵌入图表的整个代码，如本帖所示：

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

我设法执行代码没有错误，但是没有显示任何内容。 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/

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

1 个答案: