Javascript 如果沿着Google方向路线，则显示标记（来自数据库）

我有一张谷歌地图，上面显示了整个欧洲大陆的服务站，可以计算出两个地点之间的路线。然而，因为有很多车站，地图看起来很繁忙。因此，我只想显示遵循我的谷歌方向给出的路线的标记

我考虑过用一条多段线来追踪方向，或者使用一个截距，但我想不出如何与数据库对话。我当前的示例使用红色多段线显示方向，但显示所有标记

javascript的代码是：

//<![CDATA[

var customIcons = {
  as24: {
    icon: 'images/as24.png'
  },
  pearson: {
    icon: 'images/p.png'
  }
};

var rendererOptions = {
draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
var map, trafficLayer;
var europe = new google.maps.LatLng(-25.274398, 133.775136);

function initialize() {

var mapOptions = {
zoom: 6,
center: europe
};

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionsPanel'));

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
computeTotalDistance(directionsDisplay.getDirections());
});

trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);

    var control = document.getElementById('traffic-wpr');
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);

    google.maps.event.addDomListener(control, 'click', function() {
      trafficLayer.setMap(trafficLayer.getMap() ? null : map);
    });

 calcRoute();
 }



function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
  origin:start,
  destination:end,
  //waypoints:[{location: 'London, England'}, {location: 'Paris, France'}],
  travelMode: google.maps.TravelMode.DRIVING
 };
 directionsService.route(request, function(response, status) {
 if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(response);
 }
var polyline = new google.maps.Polyline({
 path: [],
 strokeColor: "#FF0000",
        strokeOpacity: 0.2,
        strokeWeight: 30,
        fillColor: "#FF0000",
        fillOpacity: 0.35
});
var bounds = new google.maps.LatLngBounds();


var legs = response.routes[0].legs;
for (i=0;i<legs.length;i++) {
var steps = legs[i].steps;
for (j=0;j<steps.length;j++) {
var nextSegment = steps[j].path;
for (k=0;k<nextSegment.length;k++) {
  polyline.getPath().push(nextSegment[k]);
  bounds.extend(nextSegment[k]);


 }
 }
}



polyline.setMap(map);
map.fitBounds(bounds);

 });
}



function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000.0;
document.getElementById('total').innerHTML = total + ' km';
}
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);
    }
  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}




function doNothing() {}

//]]>

//

标记的代码（as24_genxml.php）是：

---

我似乎找不到其他有类似问题的人。使用多段线可能会使事情变得过于复杂？

好吧，老实说，我不确定我是否把这件事复杂化了，但是如果你只是想让地图看起来不那么凌乱，那么你不需要在后端做任何更改（假设您没有性能问题，我不确定我们在这里讨论的点有多少。您需要做的只是检查多段线上的每个坐标与每个“加油站”标记之间的距离

中提供了如何实现这一点的示例。您甚至可以隐藏多段线以进一步减少混乱，或者删除多段线并使用每个路径段内的坐标来实现相同的效果

---

但是，如果您有很多要检查的点和很长的路线，这可能会成为一个问题。唯一确定的方法是尝试，但渐进复杂性不是很大。

方向服务为您提供一个包含所有路线点的路线对象。然后您需要定义“沿路线”并且可能会显示在您的航路点周围特定范围内的标记。对于这一点，您可以在这里检查我的答案：我从来没有想过这个查询，玩得很好。我以前总是在地图边界对象的坐标之间查询项目，然后在前端缩小半径。嗯，这可能是一个ok solultion，或m可能不会。例如，如果您选择10公里范围内的所有标记，并且两个航路点之间相隔50公里，会发生什么情况？这需要进行测试。感谢@MrUpsidown和Swires的评论。这可能更好地说明了这一困境：可能重复

<?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 (localhost, $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 1";
$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>';

?>