通过 routeboxer 将 latlng 值发送到 mysql 查询以更新 Google Maps Markers

Question

我正在使用 Routerboxer 生成特定路线内的纬度和经度列表。我想将 lat 和 lngs 发送回我的数据库查询（我假设使用 ajax）以返回边界内的标记。

我搜索了一下，发现数据库查询需要是：

SELECT * FROM as24 WHERE lat > a AND lat < c AND lng > b AND lng < d

我的问题是如何将这些 a、b、c 和 d 发送到 PHP 页面？

function calcRoute() {
clearBoxes();
distance = 10 * 1.609344; //within 10 miles
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(result);

      // Box around the overview path of the first route
      var path = result.routes[0].overview_path;
      var boxes = routeBoxer.box(path, distance);
      drawBoxes(boxes);
    } else {
      alert("Directions query failed: " + status);
    }
  });
}



// Draw the array of boxes as polylines on the map
function drawBoxes(boxes) {
  boxpolys = new Array(boxes.length);
  for (var i = 0; i < boxes.length; i++) {
    boxpolys[i] = new google.maps.Rectangle({
      bounds: boxes[i],
      fillOpacity: 0,
      strokeOpacity: 1.0,
      strokeColor: '#000000',
      strokeWeight: 1,
      map: map
      //Perform Search
    });
  }
}

// Clear boxes currently on the map
function clearBoxes() {
  if (boxpolys != null) {
    for (var i = 0; i < boxpolys.length; i++) {
      boxpolys[i].setMap(null);
    }
  }
  boxpolys = null;
}


google.maps.event.addDomListener(window, "load", initialize);

function load() {

var infoWindow = new google.maps.InfoWindow;

// Change this depending on the name of your PHP file
downloadUrl("as24_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
  var name = markers[i].getAttribute("name");
  var address = markers[i].getAttribute("address");
  var price = markers[i].getAttribute("price");
  var type = markers[i].getAttribute("type");
  var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
  var html = "<b>" + name + " " + price + "</b> <br/>" + address;
  var icon = customIcons[type] || {}; 
  var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icon.icon
  });
  map.getBounds().contains(marker.getPosition())
  bindInfoWindow(marker, map, infoWindow, html);
  $.post("as24_genxml.php",
{
  a:map.getBounds().getNorthEast().lat(),
  b:map.getBounds().getNorthEast().lng(),
  c:map.getBounds().getSouthWest().lat(),
  d:map.getBounds().getSouthWest().lng()
},
 function(data,status){

});


}
});
}

如您所见，我尝试通过 ajax php 发送来做到这一点。

我的 php 文件如下所示：

<?php include ('php/config.php');

function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','&lt;',$htmlStr); 
$xmlStr=str_replace('>','&gt;',$xmlStr); 
$xmlStr=str_replace('"','&quot;',$xmlStr); 
$xmlStr=str_replace("'",'&#39;',$xmlStr); 
$xmlStr=str_replace("&",'&amp;',$xmlStr); 
return $xmlStr; 
} 

// Opens a connection to a MySQL server
$connection=mysql_connect ($mysql_server, $mysql_user, $mysql_pass);
if (!$connection) {
die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($mysql_db, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM as24 WHERE lat > a AND lat < c AND lng > b AND lng < d";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'price="' . parseToXML($row['price']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo '/>';
}

// End XML file
echo '</markers>';

?>

Answer 1

这是一个示例，说明如何使用 jQuery.ajax() 将边界发送到您的 PHP 代码。

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();

$.ajax({

    url: 'your_file.php',
    cache: false,
    data: {
        'fromlat': southWest.lat(),
        'tolat': northEast.lat(),
        'fromlng': southWest.lng(),
        'tolng': northEast.lng()
    },
    dataType: 'json',
    async: false,
    success : function(data) {

        $.each(data, function(i,marker) {

            createMarker(marker);
        });
    }
});

function createMarker(data) {

     // Check what you have here in "data" and construct your markers from here as you would do for any marker.
}

在你的 PHP 中：

$fromlat = $_GET['fromlat'];
$tolat = $_GET['tolat'];
$fromlng = $_GET['fromlng'];
$tolng = $_GET['tolng'];

$results = array();

$sql = "SELECT * from your_table where (lat>'" . $db->real_escape_string($fromlat) . "' and lat<'" . $db->real_escape_string($tolat) . "' and lng>'" . $db->real_escape_string($fromlng) . "' and lng<'" . $db->real_escape_string($tolng) . "')";

$result = $db->query($sql) or die($db->error);

while ($obj = $result->fetch_object()) {

    $results[] = $obj;
}

echo json_encode($results);

当然，如果你喜欢 POST 而不是 GET，你可以适应。

Answer 2

我建议使用网络服务来实现这一点，传递长纬度并根据需要返回。此处提供了一个简单示例：http://davidwalsh.name/web-service-php-mysql-xml-json、http://www.php.net/manual/en/refs.webservice.php 以及更多信息：php web service example

这将允许您在将来需要时从任何位置使用该服务（可扩展性总是很好）。

您可以使用jQuery ajax 调用该方法来访问服务，以在返回结果时更新地图。