0

Googleのジオチャートにいくつかの都市をプロットしようとしています。この関数は完全に正常に機能し、都市をプロットします。

function drawMarkersMap() {
  var newInfo = google.visualization.arrayToDataTable([
   ['City'],
   ['San Diego'],
   ['Los Angeles'],
   ['San Jose']
  ]);

それは素晴らしいことですが、私はphpを介してデータベースから都市を生成しています。したがって、このphp配列があるとしましょう

<?php $city = array("San Diego", "Los Angeles", "San Jose"); ?>

今、私が苦労している部分がここにあります。各都市を個別に出力できるように、ループが適切に機能していないようです。

これを行うと、配列の最初の都市（サンディエゴ）のみが表示され、その理由がわかります...このメソッドが少なくとも「何か」を出力することを示しているだけです

function drawMarkersMap() {
  var newInfo = google.visualization.arrayToDataTable([
    ['City'],
    ['<?php foreach($city as $location){ echo json_encode($location); } ?>']
]);
//options here
}

だから、私はjavascriptを使用して配列内の各アイテムをループして印刷しようとしていますが、ロジックが正しくないようです

function drawMarkersMap() {
  var newInfo = google.visualization.arrayToDataTable([
    ['City'],
    for(i=0;i<json_encode($city).count;i++){
     //some kind of print statement mixing php and javascript. I need help here please!
     }
]);

これがページ全体です

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<?
$city = array("San Jose","Los Angeles","San Diego");
foreach($city as $key=>$value) {
     echo "$value";
}  
?>
<script type="text/javascript">
 google.load('visualization', '1.1', {packages: ['geochart']});


function drawMarkersMap() {
  var newInfo = google.visualization.arrayToDataTable([
    ['City'],
['<?php echo json_encode($city);  ?>']
]);

var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));

chart.draw(newInfo, {width: 556, height: 347, displayMode: 'markers', region: 'US-CA', resolution: 'provinces'});
}


google.setOnLoadCallback(drawMarkersMap);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="chart_div"></div>
</body>
</html>
4

2 に答える 2

2 
<?php $city = array(array('City'), array('San Diego'), array('Los Angeles'), array('San Jose')); ?>

var newInfo = google.visualization.arrayToDataTable(<?php echo json_encode($city); ?>);

これにより、元のスクリプトとまったく同じ配列構造が再作成されます。

于 2012-05-18T01:24:48.950 に答える
1

implode関数を使ってみませんか？

<script type="text/javascript">
<?php $city = array("San Diego", "Los Angeles", "San Jose"); ?>
    function drawMarkersMap() {
        var newInfo = google.visualization.arrayToDataTable([
        ['City'],
        ['<?php echo implode("'],\n\t\t['",$city) ?>']
        ]);
    }
</script>

その結果、

<script type="text/javascript">
    function drawMarkersMap() {
        var newInfo = google.visualization.arrayToDataTable([
        ['City'],
        ['San Diego'],
        ['Los Angeles'],
        ['San Jose']]);
    }
</script>

リクエストに応じて…</p> 

<script type="text/javascript">
<?php $city = array("San Diego", "Los Angeles", "San Jose"); ?>
    function drawMarkersMap() {
        var newInfo = google.visualization.arrayToDataTable([
        ['City'],
        ['<?php foreach($city as &$c)$c=htmlspecialchars($c,ENT_QUOTES,'UTF-8'); echo implode("'],\n\t\t['",$city); ?>']
        ]);
    }
</script>

..JSONの使用が非常に実用的であるという事実に同意する必要があります:)

于 2012-05-18T01:36:52.730 に答える