Question

我正在尝试使用纬度，经度和名称将位置从json加载到Google Charts地图。我创建了其他谷歌图表，他们工作正常，但地图不会为我呈现。我在html文件上有一个谷歌地图Api键，也可以从这里调用javascript和php文件。我一直在看这几天，但似乎无法看到它失败的原因，一双新鲜的眼睛能看到什么出错吗？提前谢谢。

php文件从数据库中提取查询并将其发送到json;

    <?php

include '..\..\include\demo_conn.php'; 


    $conn = new PDO($DB_HOST, $DB_USER, $DB_PASS); 

    $result = $conn->prepare('SELECT lat as "Lat",
                                lon as "Long",
                                name as "Name"
                                FROM locations');

    $result->execute(); 

 $rows = array();
  $table = array();
  $table['cols'] = array(

    // Labels for your chart, these represent the column titles.


    array('label' => 'Lat', 'type' => 'number'),
    array('label' => 'Long', 'type' => 'number'),
    array('label' => 'Name', 'type' => 'string')

);
    /* Extract the information from $result */
    foreach($result as $r) {

      $temp = array();

      // Trailer codes

      $temp[] = array('v' => (float) $r['Lat']); 

      // Values of the each location

      $temp[] = array('v' => (float) $r['Long']); 
      $temp[] = array('v' => (string) $r['Name']);
      $rows[] = array('c' => $temp);
    }

$table['rows'] = $rows;

//write to json file
    $fp = fopen('demo_02.json', 'w');
    fwrite($fp, json_encode($table));
    fclose($fp);

?>

这是结果json;

{"cols":[{"label":"Lat","type":"number"},{"label":"Long","type":"number"},{"label":"Name","type":"string"}],"rows":[{"c":[{"v":52.24655},{"v":-6.34384},{"v":"EUR6"}]},{"c":[{"v":52.24655},{"v":-6.34384},{"v":"EUR4"}]},{"c":[{"v":52.24655},{"v":-6.34384},{"v":"EUR2"}]},{"c":[{"v":52.64901},{"v":-8.57918},{"v":"EUR2"}]},{"c":[{"v":52.24655},{"v":-6.34384},{"v":"EUR3"}]}]}

这是Google图表地图的javascript文件;

// Load the Visualization API and the map package.
    google.load('visualization', {'packages': ['map'] });
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);


function drawChart() {

      // Create our data table out of JSON data loaded from server.
      var jsonData = $.ajax({
          url: "demo_02.json",
          dataType: "json",
          async: false
          }).responseText;

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.arrayToDataTable(jsonData);
      var options = {
          //title: 'Location',
          showTooltip: true,
          showInfoWindow: true,
          enableScrollWheel: true,
          mapType: 'normal'
        };
      // Instantiate and draw our chart, passing in some options.
      // Do not forget to check your div ID
      var map = new google.visualization.Map(document.getElementById('demo_02_div'));
      map.draw(data, options);
    }

这是用于测试目的的HTML;

<html>
  <head>

    <!--Load for maps-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=*************************************************&callback=initMap"
  type="text/javascript"></script>

    <!--PHP-->
    <script type="text/javascript">$.ajax({url: "demo_02.php"})</script>

    <!--Javascript-->
    <script type="text/javascript" src="demo_02.js"></script>


  </head>

  <body>

    <div id="demo_02_div">
    </div>

  </body>
</html>

非常感谢任何帮助。

Answer 1

首先：建议使用loader.js加载库，而不是jsapi

根据release notes ...

通过jsapi加载程序保留的Google Charts版本不再一致更新。从现在开始请使用新的gstatic装载机。

这只会改变load声明......

google.charts.load('current', {
  callback: drawChart,
  packages: ['map']
});

下一步：arrayToDataTable是静态方法（不需要new关键字）

但是，该方法用于加载基本的数组数据

加载 json 数据，只需直接创建DataTable

var data = new google.visualization.DataTable

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['map']
});

function drawChart() {
  var data = new google.visualization.DataTable({"cols":[{"label":"Lat","type":"number"},{"label":"Long","type":"number"},{"label":"Name","type":"string"}],"rows":[{"c":[{"v":52.24655},{"v":-6.34384},{"v":"EUR6"}]},{"c":[{"v":52.24655},{"v":-6.34384},{"v":"EUR4"}]},{"c":[{"v":52.24655},{"v":-6.34384},{"v":"EUR2"}]},{"c":[{"v":52.64901},{"v":-8.57918},{"v":"EUR2"}]},{"c":[{"v":52.24655},{"v":-6.34384},{"v":"EUR3"}]}]});
  var options = {
    showTooltip: true,
    showInfoWindow: true,
    enableScrollWheel: true,
    mapType: 'normal'
  };
  var map = new google.visualization.Map(document.getElementById('demo_02_div'));
  map.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="demo_02_div"></div>

Google可视化地图无法呈现

1 个答案: