在Google Geocharts中显示区域内的文字

Question

如何在区域上显示文字？目前它仅显示所选区域,鼠标悬停在其上方显示文本.我需要显示文本和区域.检查这个小提琴 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 中肯定有效（尚未使用其他浏览器进行测试）：

1. 使用 2 个 div 来放置地图。两者使用相同的绝对位置和大小。第一个将被隐藏，第二个将具有更高的 z-index（例如 10），以便它分层在第一个之上（我不确定 2 个 div 是否绝对必要，但还没有花时间尝试仅 1)。

2. 创建一个显示模式为“text”的地图（我们称之为“textmap”）。将地图加载到第一个 div。注意：此地图需要与“真实”（彩色）地图不同的数据表输入。

3. 在“准备好”时向文本映射添加一个侦听器。在侦听器回调中，循环遍历 document.getElementsByTagName('text')，并且对于列表中的每个元素，将其 insideHTML（或 textContent）和位置信息（来自 getBoundingClientRect()）保存在数组中（将此称为“标签数据”）大批”）。完成后，您可以根据需要销毁文本图（我想您也可以销毁隐藏的 div）——只需确保保存标签数据数组即可。

4. 文本地图侦听器中的最后一步是显示彩色地图并添加数据标签（我不确定为什么，但首先添加标签似乎不起作用。也许在创建地图时它会自动采用更高的 z索引比页面上的其他任何内容都重要）。因此，使用 map.draw() 绘制“真实”地图（彩色地图），然后向该地图添加一个侦听器，并在其回调中循环遍历保存的数据标签，并将每个标签作为新的 div 添加回来（使用基于保存的位置数据的绝对位置）比页面上其他任何内容都更高的 z 索引（例如 20）。