谷歌可视化地图不呈现

问题描述：

我想要使用纬度，经度和名称从json加载位置到谷歌图表地图。我创建了其他Google图表，他们工作正常，但地图只是不会呈现给我。我在html文件上有Google maps 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>

任何帮助，非常感谢。

答

第一：建议使用loader.js加载库，对jsapi

根据release notes ...

是通过JSAPI装载机仍然可用的谷歌图表的版本是不更新一贯更新。请从现在开始使用新的gstatic loader。

这只会改变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>

谢谢WhiteHat！这真的帮了我很大的忙，你的回答帮助我更好地理解了方法，从现在开始我将更好地利用Google Charts支持。再次感谢你的帮助。 – crkmkhea

Samuel Liew，FélixGagnon-Grenier，Ashish Nitin Patil，Aditya Vyas-Lakhan，EdChum。我认为我的问题很清楚，但回顾一下，我可以更好地表达它。为未来学到的教训，谢谢。 – crkmkhea

欢呼！乐意效劳... – WhiteHat

谷歌可视化地图不呈现

相关推荐