javascript - 如何在 Google map 中加载 JSON 文件

Question

我想使用 JSON 数据为 Google map 中的国家/地区着色。目前我已经将所有内容都“硬编码”了:

<script type="text/javascript">
  google.charts.load('current', {'packages':['geochart']});
  google.charts.setOnLoadCallback(drawRegionsMap);

  function drawRegionsMap() {

    var data = google.visualization.arrayToDataTable([
      ['Country'],
      ['China'],
      ['Taiwan'],
      ['Malaysia'],
    ]);

    var options = {
          backgroundColor: 'none',
          defaultColor: '#F27935'
    };

    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

    chart.draw(data, options);
  }
</script>

代码绘制以下图像:

现在我想使用 JSON 文件，因为我还想显示其他数据。到目前为止我拥有的 JSON:

{
  "Chinese": {
    "Country": {
      "China": {},
      "Taiwan": {},
      "Malaysia": {}
    }
  },
  "English": {
    "Country": {
      "United States": {},
      "United Kingdom": {},
      "Australia": {},
      "New Zealand": {}
    }
  }
}

我还想在特定页面上显示特定数据。例如，在 Chinese.php 上，我想以 JSON 形式显示数据“Chinese”。

我应该使用 if 语句吗？我想也许这段代码可以帮助...

if(document.URL.indexOf("chinese.php") >= 0){ 
...json code here
}

我的问题:如何在 Google map 中加载仅请求特定页面的特定部分的 JSON 文件。

Answer 1

以下代码解决了我的问题。我使用单独的 JSON 文件来进行此修复。

function drawcountryMap() {
        var options = {
              backgroundColor: 'none',
              defaultColor: '#F27935'
        };
        $.ajax({
          url: "cn.json",
          dataType: "JSON"
        }).done(function(data) {
                var countryArray = [["Country"]];
                $.each(data.country, function() {
                    var countryitem = [this.name];
                    countryArray.push(countryitem);
                });
          var countryData = google.visualization.arrayToDataTable(countryArray);
          var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
          chart.draw(countryData, options);
        });
}
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawcountryMap);

我的 JSON 文件

{ "country": 
[
{"name":"Taiwan"},
{"name":"China"},
{"name":"Malaysia"}
] }

得到相同的结果: