將數據發布到Google Charts API-地理地圖

Question

我開發了一系列復選框和代碼，它們對已檢查的盒子數量進行計數，並使用$ POST和一個單獨的PHP文件（results.php），我可以看到計數總數-以及使用ECHO進行的確認，所選復選框的值（在本例中為“國家”）中。 這是對我有用的兩段代碼的示例：

<form action="results.php" method="post">
<table width="100%">
<tr class=main><td width=190><h2><input type=checkbox name="continents[]" value="EUROPE"> <ins><b><strong>EUROPE (45 COUNTRIES).   </strong></b></ins></h2></td></tr>
<tr class=main><td width=190><input type=checkbox name="selected[]" value="al"> Albania</td><td width=190><input type=checkbox name="selected[]" value="fi"> Finland</td><td width=190><input type=checkbox name="selected[]" value="lu"> Luxembourg</td><td width=190><input type=checkbox name="selected[]" value="ru"> Russia</td></tr></table><br><br>

以及來自“ results.php”文件的代碼：

<?php
 if(isset($_POST['continents'])){ $aCont = $_POST['continents']; }
  if(empty($aCont))
 {
   echo("You didn't select any continents -");
 }
 else
 {
   $M = count($aCont);

     echo("You have travelled to $M continents <br><br> ");
   for($i=0; $i < $M; $i++)
   {
 echo($aCont[$i] . "<br> ");
   }
 }
?>
 <br>
 <?php
 if(isset($_POST['selected'])){ $aPlace = $_POST['selected']; }
 if(empty($aPlace))
  {
   echo("You didn't select any countries.");
 }
 else
 {
   $N = count($aPlace);

   echo("and have visited $N countries <br><br> ");
   for($i=0; $i < $N; $i++)
   {
echo($aPlace[$i] . ", ");
   }
 }
?>

但是，我的問題是如何將其發布到Google的地理圖表API中，以便生成地圖。 我已經在相同的“ results.php”文件上使用了Google Charts世界地圖的測試版。 這適用於手動輸入的國家/地區值。 例如，以下是在代碼的“函數drawRegionsMap（）”部分中手動編碼了澳大利亞和加拿大的代碼（使用完整的國家名稱或兩位數字的國家/地區代碼）：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
 google.charts.load('current', {
   'packages':['geochart'],
   'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
 });
 google.charts.setOnLoadCallback(drawRegionsMap);

 function drawRegionsMap() {
   var data = google.visualization.arrayToDataTable([
   ['Country',   'Visited'],
   ['Australia', 1],['CA', 1],
   ]);

   var options = {
   colorAxis: {colors:['green','green']},
   legend: 'none',
   backgroundColor: '#cce5ff',
   defaultColor: '#f5f5f5',
   datalessRegionColor: 'white',
   };

   var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
   chart.draw(data, options);
 };

但是，如何獲取較早生成的結果值（使用$ POST從選中的復選框中生成），以便Google API代碼讀取這些值以基於該數據生成地圖？

任何建議表示贊賞。

Answer 1

正如我在評論中所建議的那樣，對於這種特定情況，您不需要使用php。 您可以在表單提交事件中捕獲選定的國家並生成地圖。 它將請求保存到服務器。

我修改了drawRegionsMap()函數以接受一個參數（國家/地區數組）並根據該參數生成地圖。 您將必須在表單提交事件中添加事件偵聽器，以捕獲選定的國家/地區，構建數組並將其傳遞給drawRegionsMap()函數。

 function drawRegionsMap(countryArray) {
   var data = google.visualization.arrayToDataTable(countryArray);
   var options = {
   colorAxis: {colors:['green','green']},
   legend: 'none',
   backgroundColor: '#cce5ff',
   defaultColor: '#f5f5f5',
   datalessRegionColor: 'white',
   };

   var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
   chart.draw(data, options);
 };

 document.getElementById("submit").addEventListener("click", function(e){
 e.preventDefault();
 var countryArray = [['Country',   'Visited']];
 var visitedCountries = document.getElementsByName('countries[]');

    for(var i = 0; i < visitedCountries.length; ++i)
  {
      if(visitedCountries[i].checked){
        countryArray.push([visitedCountries[i].value, 1]);
      }
  }

    drawRegionsMap(countryArray);
}); 

這是一個工作的小提琴

但是，如果仍然要使用PHP並從服務器端獲取數據，則可以執行相同的操作。 只需向服務器發出ajax請求以獲取國家/地區數組並將其傳遞給drawRegionsMap()函數。

================================================== ==========

編輯：根據注釋中的要求添加了Ajax方法。

如您所要求顯示的使用ajax請求執行上述操作的示例，在這里，我添加了一個簡單的代碼示例。

您所需要做的就是替換此事件偵聽器的主體：

document.getElementById("submit").addEventListener("click", function(e){}

（也就是說，當單擊按鈕時）包括ajax調用，而不是遍歷復選框值。

document.getElementById("submit").addEventListener("click", function(e){

    e.preventDefault();

    $.ajax({
        url:'/gh/get/response.html/Nimeshka/jsFiddleAjax/tree/master/',
        complete: function (response) 
        {
            var countryArray = JSON.parse(response.responseText);
            drawRegionsMap(countryArray);
        },
        error: function () {
            $('#status').html('Error getting data from the server!');
        },
    });
}); 

因此，如您在上面看到的：當用戶單擊按鈕時，我正在調用服務器端頁面。

https://raw.githubusercontent.com/Nimeshka/jsFiddleAjax/master/demo.response.html

假設上面是我的服務器端頁面，如果打開它，則會看到它的打印內容：

[["Country","Visited"],["al",1],["fi",1],["ru",1]]

這是json格式的字符串，可以轉換回Javascript數組。 我從服務器獲取數據，然后使用JSON.parse()方法進行解析並分配給countryArray變量，然后將其傳遞給我的drawRegionsMap(countryArray); 功能。

您必須在服務器上創建一個頁面以返回如上所述的數組。

這是一個小提琴，您可以在這里看到它的運行情況： https : //jsfiddle.net/nimeshka/g3h4y19k/

希望能幫助到你。 隨時問您是否需要知道什么:)