11

我见过很多其他人有同样的问题，但找不到答案。我有一个使用 Google Maps Javascript api v3 构建的简单地图。该地图有几个标记，它们链接到信息窗口以显示每个标记的特定信息。我想在信息窗口中添加一个谷歌图表，但不知道该怎么做。我浏览了我能找到的每一个帖子（在这里和其他论坛），我注意到其他人试图做类似的事情，但似乎没有具体的答案。我注意到人们使用融合表成功地做这样的事情，但这不是我的情况，因为我从 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 属性中：

在谷歌地图 api 信息窗口内容字符串中使用谷歌图表工具

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

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

我会很感激任何帮助。

谢谢

何塞

4

1 回答 1

14

这似乎不起作用，因为该功能看不到容器。

您可以将容器作为参数传递给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/

于 2013-02-03T13:15:30.327 回答