php配列をGoogle JavaScript API APIに渡すには？

ここにコードがありますが、私はデータベースから経度と緯度を取得しますが、Google Javascript Maps APIを作ってマップ上に赤い円を描くことはできません。私は、Jsオブジェクトにいくつかの問題があると思います。php配列をGoogle JavaScript API APIに渡すには？

<?php 
    error_reporting(0); 
    $db = new mysqli("localhost", "root", "", "app"); 
    if ($db->connect_errno) { 
     die("<center>Sorry, please check your network connection!</center>"); 
    } 

    $longiArray = array(); 
    $latitArray = array(); 
    $num  = 0; 

    $longitude = $db->query("SELECT * FROM water"); 
    $longitude->num_rows; 

    while ($row = $longitude->fetch_object()) { 
     $longiArray[$num] = $row->longi; 
     $latitArray[$num] = $row->latit; 
     $num++; 
    } 
    ?> 
    <!DOCTYPE html> 
    <html> 
     <head> 
      <meta content="initial-scale=1.0, user-scalable=no" name="viewport"> 
       <meta charset="utf-8"> 
        <title> 
         Circles 
        </title> 
        <style> 
         html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
      } 
      #map { 
      height: 100%; 
      } 
        </style> 
       </meta> 
      </meta> 
     </head> 
     <body> 
      <div id="map"> 
      </div> 
      <script> 

    var city = new Array(); 
    var counter = <?php echo"$num";?>; 
    for (var x = 0; var x < counter; var x++){ 
     var citymap = { 
     city[x] = { 
      center: {lat: <?php echo"$latitArray[x]";?>, 
      lng: <?php echo"$longiArray[x]";?>}, 
      population: 10 
     }, 
     } 
    }; 

    function initMap() { 
     // Create the map. 
     var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 13, 
     center: {lat: -28.73226, lng: 24.76232}, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
     }); 

    for (var city in citymap) { 

     var cityCircle = new google.maps.Circle({ 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35, 
     map: map, 
     center: citymap[city].center, 
     radius: Math.sqrt(citymap[city].population) * 100 
     }); 
    } 



    } 
      </script> 
      <script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=Google API Key here &signed_in=true&callback=initMap"> 
      </script> 
     </body> 
    </html>

出典

2016-10-09 879099766

を私はマップAPIサイトからのコードのいくつかの変更を行います。 – 879099766

PHPによって生成されたHTML/javascriptはどのように見えますか？ – geocodezip

何も生成されませんでした。 – 879099766

修正のカップル：

メタタグ自動閉鎖されているので、彼らは</meta>を必要としません。詳細については、MDNを参照してください。
は、Googleマップのキーを取得する - したがって、このGoogle Maps documentation for this

を参照してください。
<script async defer src="https://maps.googleapis.com/maps/api/js?key=asdf23f2...23f&callback=initMap" type="text/javascript"></script>
PHPを使用してjavascriptの変数citymapを生成し、json_encode以下の例を参照してください。<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
のようなものになるはずです。各データベースレコードにname列がありますか？私たちは、各都市のラベルを持っている必要があります（たとえば、「シカゴ」、「バンクーバー」など）、各都市の主要持つために：

$longitude = $db->query("SELECT * FROM water"); 
//$longitude->num_rows;//what is the point of this line? 
$cityMap = array(); 
while ($row = $longitude->fetch_object()) { 
    //presuming we have a name column - otherwise assign from another source (e.g. array of cities) 
    $cityMap[$row->name] = array(
    'center' => array(
     'lng' => $row->longi, 
     'lat' => $row->latit 
    ), 
    'population' => 10 
); 
?> 
<!-- in the html body .... --> 

<script> 

var citymap = <? echo json_encode($cityMap); ?>; 

function initMap() {

出典

2016-10-09 21:14:57

1）ありがとうございます。 2）私はそれを持っている、私はこの質問を投稿するときにキーを削除します。 3）都市の名前のカラム（「db」は「都市」と呼ばれます）がありますので、毎回市の名前が異なる必要がありますか？（データベースでは、同じ都市です）。 json_encode（$ cityMap）では、$ cityMapはPHPで配列されていますが、PHP配列全体をJs配列にエンコードしていますか？ – 879099766

私は変更を加えましたが、まだGoogleマップを生成していません。 <？php error_reporting（0）; $ db = new mysqli（ "localhost"、 "root"、 ""、 "app"）; if（$ db-> connect_errno）{ 死ぬ（ "

あなたのネットワーク接続をご確認ください！"）; } $ select = $ db-> query（ "SELECT * FROM water"）; $ select-> num_rows; $ cityMap = array（）; 一方（$行= $ SELECT - > fetch_object（））{ $ cityMap [ます$ row->シティ] =配列（ '中央' =>配列（ 'LNG' =>ます$ row-> longi、 'lat' => $ row-> latit、）、 'population' => 10, ）; } ？> – 879099766

はいアレイのキーは一意でなければなりません - [php.net]（http://php.net/array）： '配列宣言の複数の要素が同じキーを使用する場合、最後のものだけが他のすべてのものが上書きされるのと同じように使用されます。 '' num 'の値を各都市に付加することができます： '$ citymap [$ row-> city。$ num ++] = array（' center '...' –

-1

エラーはjavascriptのcityArrayからです。怒鳴るように修正：

<?php 
echo "var city = new Array();"; 
echo "var counter = $num"; 
for($x=0 ; $x<$num ; $x++){ 
     echo "var citymap = {". 
     "city[x] = {". 
      "center: {lat: $latitArray[$x] ,". 
      "lng: $longiArray[$x] }, ". 
      "population: 10". 
     "},". 
     "}"; 
} 
?>

出典

2016-10-09 20:55:36

これは、各繰り返しごとに 'var citymap'が再宣言されるため、緯度と経度の配列の最後の値のみを含みます...' city [x] 'の' x'も値を持たず、その前に 'var x'がないので... –

うーん...私は試しましたが、何も生成しませんでした。 – 879099766

php配列をGoogle JavaScript API APIに渡すには？

答えて

関連する問題