谷歌可視化地圖不呈現

我想要使用緯度，經度和名稱從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>

任何幫助，非常感謝。

來源

2017-02-09 crkmkhea

第一：建議使用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>

來源

2017-02-10 02:56:09 WhiteHat

謝謝WhiteHat！這真的幫了我很大的忙，你的回答幫助我更好地理解了方法，從現在開始我將更好地利用Google Charts支持。再次感謝你的幫助。 – crkmkhea

Samuel Liew，FélixGagnon-Grenier，Ashish Nitin Patil，Aditya Vyas-Lakhan，EdChum。我認爲我的問題很清楚，但回顧一下，我可以更好地表達它。爲未來學到的教訓，謝謝。 – crkmkhea

歡呼！樂意效勞... – WhiteHat

谷歌可視化地圖不呈現

回答

相關問題