Question

我有一个大约4000个地址的数据库，我想在谷歌地图上列为标记...我的最终目标是有两个单独的查询来显示两种类型的标记，但是现在我想知道如何将我的PHP的结果与我的javascript中的位置变量结合起来用于地图。这是成功回应纬度和逻辑的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 ...示例代码列出了lat和lng，我假设这是我需要执行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调用之前，您必须确保映射已准备就绪。

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

1 个答案: