从数据库查询创建谷歌地图标记

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调用之前确保地图已准备就绪。