Question

我想创建一个地图，根据该州的用户数量，可以用不同颜色的颜色填充美国的状态。这是我的代码

<html>
<head>
  <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([
        ['State', 'No of Users'],
        ['PA', 200],
        ['CA', 300],
        ['NY', 400],
        ['TX', 500],
        ['SC', 600],
        ['MD', 700]
      ]);

      var options = {};
      options['region'] = 'US'
      options['dataMode'] = 'regions';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
  };
  </script>
</head>

<body>
  <div id='map_canvas'></div>
</body>

</html>

使用完整的州名也无效。我尝试在google可视化代码游乐场上执行此操作，然后按照给出here和this stackoverflow问题的示例进行操作。我可以看到一张美国地图，当我将鼠标悬停在一个状态时会突出显示，但我没有看到状态根据其强度而变色。

谢谢

Answer 1

您必须使用美国前缀：

定义美国州

var data = google.visualization.arrayToDataTable([
    ['State', 'No of Users'],
    ['US-PA', 200],
    ['US-CA', 300],
    ['US-NY', 400],
    ['US-TX', 500],
    ['US-SC', 600],
    ['US-MD', 700]
]);

请参阅ISO 3166-2:US

Answer 2

首先，您应该使用GeoChart可视化而不是GeoMap，因为不推荐使用GeoMaps。然后，将resolution选项设置为'provinces'以获取状态映射：

function drawMap() {
    var data = google.visualization.arrayToDataTable([
        ['State', 'No of Users'],
        ['PA', 200],
        ['CA', 300],
        ['NY', 400],
        ['TX', 500],
        ['SC', 600],
        ['MD', 700]
    ]);

    var options = {
        region: 'US',
        dataMode: 'regions',
        resolution: 'provinces'
    };

    var container = document.getElementById('map_canvas');
    var geomap = new google.visualization.GeoChart(container);
    geomap.draw(data, options);
};
google.load('visualization', '1', {packages:['geochart'], callback: drawMap});

在此处查看：http://jsfiddle.net/asgallant/MxFX2/

使用谷歌可视化的强度地图

2 个答案: