2017-03-17 124 views
1

我有一些代碼查詢我的數據庫並返回地址數據。然後我將地址轉換爲json格式的緯度和經度,以便我可以使用javascript函數在谷歌地圖上顯示標記。總體結果是關於json數據意外結束的錯誤代碼。我相信問題在於php文件。當我自己運行它時,會得到一個錯誤的頁面響應。有沒有人知道我爲什麼會遇到錯誤?PHP將數據從查詢轉換成json數組

這裏是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); 

這裏是JavaScript:

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'});}} 

控制檯: 未捕獲的語法錯誤:在JSON.parse(JSON輸入 意外結束) 在XMLHttpRequest的.xhr.onreadystatechange(map.php:36)

+0

爲什麼你需要一個數組?只需傳遞一個具有兩個值的字符串即可。 – Stuart

+1

如果錯誤發生是因爲您的錯誤響應不是JSON格式會怎麼樣?我指的是你迴應的地方'''查詢失敗\ n「' –

+0

你可以console.log()xhr.responseText的內容並粘貼結果嗎? – Logar

回答

0

您正在剔除$ Lon並使用$ 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>