如何在谷歌地理图表中隐藏图例工具提示并仅保存国家名称

Question

大家好，我正在尝试隐藏图例工具提示并仅保存国家名称或隐藏所有工具提示但不成功。请帮忙。比我使用的代码：

<div>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["geomap"]});
      google.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'ATI'],
          ['Portugal', 1],
          ['Brazil', 7],
          ['Peru', 9],
          ['Argentina', 3],
          ['Spain', 3],
          ['Mexico', 3],
          ['Venezuela', 7],
          ['Ecuador', 4],
          ['Chile', 6],
          ['Colombia', 3],          
          ['Costa Rica', 4],

        ]);

        var options = {};

        options['dataMode'] = 'regions';
        options['region'] = 'world';
        options['showLegend'] = false;
        options['width'] = '100%';
        options['tooltip.trigger'] = 'none';
        options['tooltip'] = {textStyle: {color: '#FFF'}, showColorCode: false};
        options['tooltip.textStyle'] = {color: 'white'};
        options['height'] = '600px';
        options['colors'] = [0xf9ffed, 0xff0943, 0x50eb1f, 0xeab4d2];
        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);
        geomap.draw(data, options);



      };
    </script>
     <div align="center" id="regions_div" style="width: auto; height: auto;"></div>

</div>

结果我看到了一张带有图例编号的地图。而且我不知道如何隐藏它们。

Answer 1

GeoMap (google.visualization.GeoMap) 是一个基于 Flash 的控件，不支持为其配置工具提示可见性，而 GeoChart (google.visualization.GeoChart) 是一个基于 SVG 的控件，它反过来取代了 GeoMap 控件和supports more options for customizing it，尤其是隐藏工具提示的能力。

话虽如此，我建议用 GeoChart 替换 GeoMap，如下所示。

示例

google.load('visualization', '1', { 'packages': ['geochart'] });
google.setOnLoadCallback(drawMap);

function drawMap() {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'ATI'],
      ['Portugal', 1],
      ['Brazil', 7],
      ['Peru', 9],
      ['Argentina', 3],
      ['Spain', 3],
      ['Mexico', 3],
      ['Venezuela', 7],
      ['Ecuador', 4],
      ['Chile', 6],
      ['Colombia', 3],
      ['Costa Rica', 4],

    ]);

    var options = {};


    options['colorAxis'] = { colors: ['#f9ffed', '#ff0943', '#50eb1f', '#eab4d2'] };
    options['tooltip'] = { trigger: 'none' };
    options['legend'] = 'none';
    options['displayMode'] = 'regions';
    options['width'] = '100%';
    options['height'] = '600px';

    var container = document.getElementById('regions_div');

    var geomap = new google.visualization.GeoChart(container);
    geomap.draw(data, options);



};

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div align="center" id="regions_div" style="width: auto; height: auto;"></div>