4

米国、韓国、台湾、中国、インドの都市を含む Google Geo Chart を作成しています。使用するregions: 'world'と、マップが大きすぎて、都市のバブルがほとんど見えなくなります。次のオプションを使用しています。

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

2 つ以上の地域を含むマップを作成することはできますか?

たとえば、米国とアジアです。次のようなものを使用してリージョンを設定することを考えています。

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

1 に答える 1

2

いいえ、同じ地図上に 2 つの地域の地図を作成することはできません。

その理由は、Google ジオチャートは、表示する地域の SVG 画像に依存しており、API 内に存在する SVG マップの量が限られているためです (これが、一部の国で が機能しない理由ですresolution: 'provinces')。

ただし、両方の地域のデータを含むデータテーブルを作成し、同じデータテーブルを使用して 2 つの別々のマップ (各エリアに 1 つずつ) を作成することは可能です。

例えば：

<!--
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) は世界地図と同じ高さであり、実際には「世界」よりもスペースを節約できないことに注意してください。カナダまたはメキシコにマーカーがない場合は、北米または単に「US」を使用することをお勧めします.

于 2013-05-15T23:46:27.637 に答える