2017-03-17 7 views
1

私のデータベースに問い合わせてアドレスデータを返すコードがあります。私は、Googleマップ上にマーカーを表示するためにjavascript関数を使用できるように、アドレスをjson形式の緯度と経度に変換します。全体的な結果は、予期しないJsonデータの終了に関するエラーコードです。私は問題がphpファイルにあると信じています。私はそれを自分で実行すると、私は壊れたページの応答を取得します。なぜ誰かがエラーを起こすのか誰に見えるのですか?ここクエリからjson配列にデータを変換するPHP

は、PHPコードである:ここ

$address = pg_query($conn, " 
SELECT 
    incident.address, 
    incident.city, 
    incident.state_1 
FROM 
    fpscdb001_ws_001.incident 
WHERE 
    incident.initial_symptom = 'Chrome Upgrade' AND 
    incident.is_installed != 'true';"); 

    if (!$address) { 
      echo "Query failed\n"; 
      exit; 
     } 
$arr = array(); 
while ($markers = pg_fetch_row($address)){ 
    $Lat = $xml->result->geometry->location->lat; 
    $Lon = $xml->result->geometry->location->lng; 
    $arr[] = array("lat" => $Lat, "lng" => $Lng); 
} 
echo json_encode($arr); 

    } 
pg_close($conn); 

はジャバスクリプトである:

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function() { 
if (xhr.readyState == 4) { 
    var arr = JSON.parse(xhr.responseText); 
    if(Array.isArray(arr)){ 
     showMarkers(arr); 
    } 
} 
} 
xhr.open('GET', 'markers.php', true); 
xhr.send(); 

function showMarkers(locations){ 
var markers = locations.map(function(location, i) { 
    return new google.maps.Marker({ 
    position: location, 
    label: labels[i % labels.length] 
    }); 
}); 

var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});}} 

コンソール: キャッチされないでSyntaxError:JSON.parseでJSON入力 の予期しない終了()のXMLHttpRequestで .xhr.onreadystatechange(map.php:36)

+0

なぜ配列が必要ですか? 2つの値を文字列に渡すだけです。 – Stuart

+1

エラーレスポンスがJSON形式でないためにエラーが発生した場合はどうなりますか?私はあなたがクエリーに失敗した箇所を参照しています。\ n "' –

+0

xhr.responseTextの内容をconsole.log()して結果をここに貼り付けることはできますか? – Logar

答えて

0

$ Lonをdelcaringして$ Lngを使用しています:

$Lon = $xml->result->geometry->location->lng; 
    $arr[] = array("lat" => $Lat, "lng" => $Lng); 

また、質問のタイトルが間違っている:あなたは、JSON配列ではなく、XML列

+0

ありがとう、私はそれをキャッチしませんでした。私はコードを変更しましたが、まだエラーが出ます。 – KevMoe

0

例のコードをしたい、テストしてください。

markers.php

<?php 

$p = [ 

     ['lat'=>-37.774785, 'lng'=> 145.137978], 
     ['lat'=>-37.819616, 'lng'=> 144.968119], 
     ['lat'=>-38.330766, 'lng'=> 144.695692], 
     ['lat'=>-39.927193, 'lng'=> 175.053218], 
     ['lat'=>-41.330162, 'lng'=> 174.865694], 
     ['lat'=>-42.734358, 'lng'=> 147.439506], 
     ['lat'=>-42.734358, 'lng'=> 147.501315], 

     ]; 

echo json_encode($p); 

markers.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Marker Clustering</title> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 

<script> 
function initMap() { 

     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 3, 
      center: {lat: -28.024, lng: 140.887} 
     }); 

     var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 

     var markers = locations.map(function(location, i) { 
      return new google.maps.Marker({ 
      position: location, 
      label: labels[i % labels.length] 
      }); 
     }); 

     // Add a marker clusterer to manage the markers. 
     var markerCluster = new MarkerClusterer(map, markers, 
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
     } 

var locations; 
var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function() { 
if (xhr.readyState == 4) { 
    var arr = JSON.parse(xhr.responseText); 
    if(Array.isArray(arr)){ 
     locations = arr; 
    } 
    } 
} 
xhr.open('GET', 'markers.php', true); 
xhr.send(); 

    </script> 
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkUrEm_U0QWg1QNryI1O5FpB0xAvffJ7I&callback=initMap"></script> 
</body> 
</html> 

又は二方法:

markers.php

<?php 

$p = [ 

     ['lat'=>-37.774785, 'lng'=> 145.137978], 
     ['lat'=>-37.819616, 'lng'=> 144.968119], 
     ['lat'=>-38.330766, 'lng'=> 144.695692], 
     ['lat'=>-39.927193, 'lng'=> 175.053218], 
     ['lat'=>-41.330162, 'lng'=> 174.865694], 
     ['lat'=>-42.734358, 'lng'=> 147.439506], 
     ['lat'=>-42.734358, 'lng'=> 147.501315], 

     ]; 

return json_encode($p); 

markers_html.php

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Marker Clustering</title> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 


<script> 
function initMap() { 

     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 3, 
      center: {lat: -28.024, lng: 140.887} 
     }); 

     var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 

     var markers = locations.map(function(location, i) { 
      return new google.maps.Marker({ 
      position: location, 
      label: labels[i % labels.length] 
      }); 
     }); 

     // Add a marker clusterer to manage the markers. 
     var markerCluster = new MarkerClusterer(map, markers, 
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
     } 

var locations = <?=include("markers.php");?>; 

    </script> 
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkUrEm_U0QWg1QNryI1O5FpB0xAvffJ7I&callback=initMap"></script> 
</body> 
</html> 
関連する問題