javascript - 如果沿 Google 路线路线显示标记(来自数据库)

Question

我有一个 Google map ，它显示整个欧洲大陆的服务站，并且可以计算两个位置之间的路线。然而，由于车站很多， map 可能看起来很拥挤。因此，我只想显示遵循我的 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)是:

<?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>';

?>

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

Answer 1

好吧，说实话，我不确定我是否过于复杂，但如果您只是想让 map 看起来不那么困惑，那么您不需要在后端进行任何更改(假设您'没有性能问题，我不确定我们在这里讨论的是多少个点。您所需要做的就是检查折线上的每个坐标与每个“服务站”标记之间的距离。

first part of the answer here 中提供了如何实现此目的的示例。 。您甚至可以隐藏折线以进一步减少困惑，或者将其删除并使用每个路径段内的坐标来实现相同的效果。

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