google-visualization - 在Google Geocharts中的整个区域显示文本

Question

如何在区域上显示文本？当前，它仅显示所选区域，并且在鼠标悬停于其上时显示文本。我需要同时显示文本和区域。检查这个 fiddle
http://jsfiddle.net/manuiec/k2kvjddf/3/

        google.setOnLoadCallback(drawRegionsMap);

  function drawRegionsMap() {

    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700]
    ]);

    var options = {};

    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

    chart.draw(data, options);
  }

Answer 1

尽管有一定的痛苦，但完全有可能通过两次调用API来执行此操作。可能有一种方法可以进一步简化此操作，但这绝对可以在Chrome中使用(尚未在其他浏览器上进行测试):

使用2个div容纳 map 。两者使用相同的绝对位置和大小。第一个将被隐藏，第二个将具有较高的z索引(例如10)，以便它位于第一个之上(我不确定2 div是绝对必要的，但还没有花时间尝试仅1个)。

创建一个displayMode为'text'的 map (我们称其为“textmap”)。将 map 加载到第一个div。注意:此 map 将需要与“真实”(彩色) map 不同的数据表输入。

在“就绪”时将一个监听器添加到您的文本映射中。在监听器回调中，循环遍历document.getElementsByTagName('text')，对于列表中的每个元素，将其innerHTML(或textContent)和位置信息(来自getBoundingClientRect())保存在数组中(称为“标签数据”大批”)。完成后，您可以根据需要销毁文本 map (我想您也可以销毁隐藏的div)-只需确保保存标签数据数组即可。

文本映射监听器的最后一步是显示彩色 map 并添加数据标签(我不确定为什么，但是首先添加标签似乎不起作用。也许在创建 map 时，它会自动花费较高的时间。 z索引，而不是页面上的其他任何索引)。因此，请使用map.draw()绘制您的“真实” map (彩色 map )，然后向该 map 添加一个监听器，并在其回调中循环浏览您保存的数据标签，并将每个标签添加为新的div(基于保存的位置数据的绝对位置)的z索引比页面上的其他索引(例如20)更高。