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

通过2次API调用，完全有可能，尽管有点痛苦。可能有一种方法可以进一步简化这一点，但这绝对适用于Chrome（尚未经过其他浏览器测试）：

使用2个div来保存地图。两者使用相同的绝对位置和大小。第一个将被隐藏，第二个将具有更高的z-index（例如10），以便它在第一个上面分层（我不确定2个div是绝对必要的但是没有采取是时候只尝试1）。
创建一个地图，其中displayMode为＆＃39; text＆＃39; （让我们称之为＆＃34; textmap＆＃34;）。将地图加载到第一个div。注意：此地图将需要与您的＆＃34;真实＆＃34;不同的数据表输入。（彩色）地图。
在准备好的情况下为您的文本地图添加一个监听器。在监听器回调中，循环遍历document.getElementsByTagName（＆＃39; text＆＃39;），并且对于列表中的每个元素，将其innerHTML（或textContent）和位置信息（来自getBoundingClientRect（））保存在数组中（调用这是＆＃34;标签数据数组＆＃34;）。完成后你可以根据需要破坏你的文本地图（我想你也可以破坏隐藏的div） - 只需确保保存标签数据数组。
textmap监听器的最后一步是显示彩色地图并添加数据标签（我不知道为什么，但首先添加标签似乎不起作用。也许当创建地图后，它会自动获取比页面上任何其他内容更高的z索引。所以，画出你真实的＆＃34;使用map.draw（）映射（彩色的），然后在此映射中添加一个侦听器，并在其回调中循环保存的数据标签，并将每个标签作为新div添加回来（根据保存的位置使用绝对位置）数据）z-index高于页面上的任何其他值（例如20）。

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

1 个答案: