Question

我正在创建一个Google地理图表，其中包括美国，韩国，台湾，中国和印度的城市。如果我使用regions: 'world'，地图将会太大，城市气泡将几乎不可见。我使用以下选项：

var options = {
  region: 'world',
  displayMode: 'markers',
  resolution: 'provinces'
}

是否可以创建包含两个或更多区域的地图？

例如，美国和亚洲。我正在考虑使用以下内容设置区域：

var options = {
  region: '019','142',
  displayMode: 'markers',
  resolution: 'provinces'
}

Answer 1

不，无法在同一地图上创建两个地区的地图。

原因是Google地理标记依赖于他们所展示的任何区域的SVG图像，并且API中存在有限数量的SVG地图（这就是为什么有些国家/地区不使用resolution: 'provinces'）

但是，可以为两个区域创建包含数据的数据表，并使用相同的数据表填充两个单独的地图（每个区域中的一个）。

例如：

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Google Visualization API Sample</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['geochart']});

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

        // Draw First Chart
        var geochart = new google.visualization.GeoChart(
          document.getElementById('visualization'));
        geochart.draw(data, {width: 556, height: 347, region: '019', resolution: 'countries'});

        // Draw Second Chart
        var geochart2 = new google.visualization.GeoChart(
          document.getElementById('visualization2'));
        geochart2.draw(data, {width: 556, height: 347, region: '150', resolution: 'countries'});
      }


      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization"></div>
    <div id="visualization2"></div>
  </body>
</html>

另请注意，“美洲”地区（019）与世界地图一样高，实际上不会为您节省“世界”空间。如果加拿大或墨西哥没有任何标记，我建议使用北美或“美国”。

在同一地图中显示多个Google图表区域

1 个答案: