從數據庫查詢創建谷歌地圖標記

Question

我有一個約4000個地址的數據庫，我想在谷歌地圖上列出標記......我的最終目標是有兩個單獨的查詢來顯示兩種標記，但現在我想知道如何將結果從我的PHP結合到地圖的javascript中的位置變量。這裏是一個成功的回聲緯度和logitude的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; 
     } 
while ($markers = pg_fetch_row($address)){ 
    $request_url = "http://maps.googleapis.com/maps/api/geocode/xml?address=".$markers[0]."&sensor=true"; 
    $xml = simplexml_load_file($request_url) or die("url not loading"); 
    $status = $xml->status; 
    if ($status=="OK") { 
    $Lat = $xml->result->geometry->location->lat; 
    $Lon = $xml->result->geometry->location->lng; 
    $LatLng = "$Lat,$Lon"; 
    } 
echo "<td>$LatLng</td>"; 

    } 

這裏是JavaScript ...示例代碼具有緯度和經度上市，我認爲這是我需要執行PHP。

function initMap() { 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 5, 
     center: {lat: 39.350033, lng: -94.6500523} 
    }); 

    // Do not actually need labels for our purposes, but the site_id is best if they are required. 
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 



    // Add some markers to the map. 
    // Note: The code uses the JavaScript Array.prototype.map() method to 
    // create an array of markers based on a given "locations" array. 
    // The map() method here has nothing to do with the Google Maps API. 
    var markers = locations.map(function(location, i) { 
     return new google.maps.Marker({ 
     position: location, 
     label: labels[i % labels.length] 
     }); 
    }); 

    // Find a way to set lat and lng locations from database. 
    var markerCluster = new MarkerClusterer(map, markers, 
     {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
    } 


    var locations = //some code to populate from database 

我有一個API密鑰，幷包含了集羣的JavaScript。

Answer 1

這應做到：

PHP：

$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); 

正如你所看到的，我創建一個數組，然後轉換成在一個JSON格式的字符串。 JSON將採用這種格式[{lat:Number, lng:Number},....]與JavaScript locations陣列的預期格式完全相同。

的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', 'link/to/php/script', 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'}); 
} 

如果您使用jQuery可以簡化AJAX調用。

onreadystatechange作爲initMap函數是異步執行的，您必須在進行AJAX調用之前確保地圖已準備就緒。