显示谷歌geochart和php的地图

时间:2018-06-09 19:05:03

标签: javascript php html

大家好我试图用googlechart api绘制google地图,并通过php从mysql db中获取数据。问题是它没有显示

<?php
include ("config.php");   
header("Content-type: application/json");
$sql="SELECT Regioni, Giocatori FROM mappa";
$records = select($db, $sql);  
foreach($records as &$record) {
$record['Giocatori']=floatval($record['Giocatori']);
}
echo(json_encode($records));
?>

导致:

[ { Regioni: "Piemonte", Giocatori: 4.233 }, 
{ Regioni: "Valle d'Aosta", Giocatori: 4.233 }, 
{ Regioni: "Liguria", Giocatori: 4.233 }, 
{ Regioni: "Lombardia", Giocatori: 3.247 }, 
{ Regioni: "Trentino Alto Adige", Giocatori: 3.247 }, 
{ Regioni: "Veneto", Giocatori: 3.247 }, 
{ Regioni: "Friuli Venezia Giulia", Giocatori: 3.247 }, 
{ Regioni: "Emilia Romagna", Giocatori: 3.774 }, 
{ Regioni: "Toscana", Giocatori: 3.774 }, 
{ Regioni: "Umbria", Giocatori: 3.774 }, 
{ Regioni: "Marche", Giocatori: 3.774 }, 
{ Regioni: "Lazio", Giocatori: 3.774 }, 
{ Regioni: "Abruzzo", Giocatori: 3.774 }, 
{ Regioni: "Molise", Giocatori: 3.774 }, 
{ Regioni: "Campania", Giocatori: 5.746 }, 
{ Regioni: "Puglia", Giocatori: 5.746 }, 
{ Regioni: "Basilicata", Giocatori: 5.746 }, 
{ Regioni: "Calabria", Giocatori: 5.746 }, 
{ Regioni: "Sicilia", Giocatori: 5.746 }, 
{ Regioni: "Sardegna", Giocatori: 5.746 } ]

在js中我把这个

function crea_mappa() {
    $.getJSON('api/getdata10.php', function(data) {
        var dataTable = google.visualization.arrayToDataTable(data);

        var opzioni = {
            region: 'IT',
            displayMode: 'regions',
            resolution: 'provinces',
            colorAxis: { colors: ['#b3b3ff', '#3333ff', '#000080'] },
            legend: { textStyle: { fontSize: 13, fontName: 'Arbutus Slab' } }
        };

        var chart = new google.visualization.GeoChart(document.getElementById('grafmappa'));
        chart.draw(dataTable, opzioni);
    });
}


那么我错过了什么?我做错事情了?我把这些librires包含在地图中:

<script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/regioncoder/0/geocodes/it.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/45.2/js/jsapi_compiled_geochart_module.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/45.2/js/jsapi_compiled_ui_module.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/45.2/js/jsapi_compiled_default_module.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/45.2/js/jsapi_compiled_format_module.js"></script>
<link id="load-css-1" rel="stylesheet" type="text/css" href="https://www.gstatic.com/charts/45.2/css/util/util.css">
<link id="load-css-0" rel="stylesheet" type="text/css" href="https://www.gstatic.com/charts/45.2/css/core/tooltip.css">
<script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/45.2/loader.js"></script>

0 个答案:

没有答案