Question

我正在尝试使用Google GeoChart API选择州。

当我选择一个州时，我希望看到它突出显示。但相反，我得到了一个错误。

执行以下操作以重新创建问题：

Open this jsBin。
点击地图上的状态。
观察错误：

ReferenceError：数据未在selectHandler ...
中定义

我认为问题出在标有selectHandler的函数中。看来我的论点没有正确地传递给函数。

<!DOCTYPE html>
<html>

<head>
  <!---- >
    https://developers.google.com/chart/interactive/docs/gallery/geochart#full
  <!---->
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['geochart']
    });
    google.charts.setOnLoadCallback(drawRegionsMap);

    function drawRegionsMap() {
      var ar = [
          //['Code', 'Select', 'State'],
          ['US-AK', 0, 'Alaska'],
          ['US-AL', 0, 'Alabama'],
          ['US-AR', 0, 'Arkansas'],
          ['US-AZ', 0, 'Arizona'],
          ['US-CA', 0, 'California'],
          ['US-CO', 0, 'Colorado'],
          ['US-CT', 0, 'Connecticut'],
          ['US-DE', 0, 'Delaware'],
          ['US-FL', 0, 'Florida'],
          ['US-GA', 0, 'Georgia'],
          ['US-HI', 0, 'Hawaii'],
          ['US-IA', 0, 'Iowa'],
          ['US-ID', 0, 'Idaho'],
          ['US-IL', 0, 'Illinois'],
          ['US-IN', 0, 'Indiana'],
          ['US-KS', 0, 'Kansas'],
          ['US-KY', 0, 'Kentucky'],
          ['US-LA', 0, 'Louisiana'],
          ['US-MA', 0, 'Massachusetts'],
          ['US-MD', 0, 'Maryland'],
          ['US-ME', 0, 'Maine'],
          ['US-MI', 0, 'Michigan'],
          ['US-MN', 0, 'Minnesota'],
          ['US-MO', 0, 'Missouri'],
          ['US-MS', 0, 'Mississippi'],
          ['US-MT', 0, 'Montana'],
          ['US-NC', 0, 'North Carolina'],
          ['US-ND', 0, 'North Dakota'],
          ['US-NE', 0, 'Nebraska'],
          ['US-NH', 0, 'New Hampshire'],
          ['US-NJ', 0, 'New Jersey'],
          ['US-NM', 0, 'New Mexico'],
          ['US-NV', 0, 'Nevada'],
          ['US-NY', 0, 'New York'],
          ['US-OH', 0, 'Ohio'],
          ['US-OK', 0, 'Oklahoma'],
          ['US-OR', 0, 'Oregon'],
          ['US-PA', 0, 'Pennsylvania'],
          ['US-RI', 0, 'Rhode Island'],
          ['US-SC', 0, 'South Carolina'],
          ['US-SD', 0, 'South Dakota'],
          ['US-TN', 0, 'Tennessee'],
          ['US-TX', 0, 'Texas'],
          ['US-UT', 0, 'Utah'],
          ['US-VA', 0, 'Virginia'],
          ['US-VT', 0, 'Vermont'],
          ['US-WA', 0, 'Washington'],
          ['US-WI', 0, 'Wisconsin'],
          ['US-WV', 0, 'West Virginia'],
          ['US-WY', 0, 'Wyoming'],
        ],
        dataTable = computeDataTable(ar);
      //data = google.visualization.arrayToDataTable(ar);
      function computeDataTable(array) {
        out = new google.visualization.DataTable();
        out.addColumn('string', 'Code');
        out.addColumn('number', 'Select');
        out.addColumn({
          type: 'string',
          role: 'tooltip'
        });
        out.addRows(array);
        return out;
      }
      var options = {
        region: 'US',
        displayMode: 'regions',
        resolution: 'provinces', // 'metro'
        legend: 'none',
        animation: {
          easing: 'inAndOut',
          startup: true,
          duration: 2500,
        },
      };
      var chart = new google.visualization.GeoChart(document.getElementById('geochart'));

      function selectHandler(func, ar) {
        var selectedItem = chart.getSelection();
        if (selectedItem) {
          var row = selectedItem[0].row,
            value = data.getValue(row, 0),
            isSelected = !data.getValue(row, 1);
          //console.log(row);
          ar[row][1] = isSelected ? 1 : 0;
          //data = google.visualization.arrayToDataTable(ar);
          data = func(ar);
          //alert(value+", "+isSelected);
          //console.log('The user selected: ' + value);
          //console.log('isSelected: ' + isSelected);
          //console.log(JSON.stringify(data));
          chart.draw(data, options);
        }
      }
      google.visualization.events.addListener(chart, 'select', selectHandler);
      chart.draw(dataTable, options);
    }
  </script>
</head>

<body>
  <div id="geochart" style="width: 900px; height: 500px;"></div>
</body>

</html>

Answer 1

用这个

替换你的selectHandler

  function selectHandler() {
    var selectedItem = chart.getSelection();
    if (selectedItem) {
      var row = selectedItem[0].row;
      var isSelected = !dataTable.getValue(row, 1);
      dataTable.setValue(row, 1, isSelected ? 1 : 0);
      chart.draw(dataTable, options); 
    }
  }

基本思想是不要改变底层的ar数组。请改用dataTable setValue和getValue。

将参数传递给单击处理程序

1 个答案: