1

我正在一个网站上展示你可以走的几条路线。 http://yi.graafhuyncollege.nl/rsn.php 当我在开始输入“Wevestraat 10, Geleen”插入一个位置时，然后选择一个或多个航点和一个结束位置。它只显示部分路线，特别是直到第一个航路点。

我不知道是什么导致了这个问题，可能是函数 ShowStep 或 AttachInstruction 有问题。

Javascript部分：

var map;
var directionsDisplay;
var directionsService;
var stepDisplay;
var markerArray = [];
  
function initialize() {
  // Instantiate a directions service.
  directionsService = new google.maps.DirectionsService();

  // Create a map and center it on Manhattan.
  var geleen = new google.maps.LatLng(50.955561,5.831895);
  var myOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    center: geleen,
  panControl: false,
    zoomControl: true,
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: false,
    overviewMapControl: true,
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  // Create a renderer for directions and bind it to the map.
  var rendererOptions = {
    map: map
  }
  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)

  // Instantiate an info window to hold step text.
  stepDisplay = new google.maps.InfoWindow();
}

function calcRoute() {

// First, clear out any existing markerArray
  // from previous calculations.
  for (i = 0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
  }

  // Retrieve the start and end locations and create
  // a DirectionsRequest using WALKING directions.
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;
  var waypts = [];
    var checkboxArray = document.getElementById("waypoints");
    for (var i = 0; i < checkboxArray.length; i++) {
      if (checkboxArray.options[i].selected == true) {
        waypts.push({
            location:checkboxArray[i].value,
            stopover:true});
      }
    }
  
  var request = {
      origin: start,
      destination: end,
    waypoints: waypts,
      travelMode: google.maps.TravelMode.WALKING
      
  };

  // Route the directions and pass the response to a
  // function to create markers for each step.
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      var warnings = document.getElementById("warnings_panel");
      warnings.innerHTML += "" + response.routes[0].warnings + "";
      directionsDisplay.setDirections(response);
      showSteps(response);
    }
  });
}

function showSteps(directionResult) {
  // For each step, place a marker, and add the text to the marker's
  // info window. Also attach the marker to an array so we
  // can keep track of it and remove it when calculating new
  // routes.
  var myRoute = directionResult.routes[0].legs[0];

  for (var i = 0; i < myRoute.steps.length; i++) {
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point,
        map: map
      });
      attachInstructionText(marker, myRoute.steps[i].instructions);
      markerArray[i] = marker;
  }
}

function attachInstructionText(marker, text) {
  google.maps.event.addListener(marker, 'click', function() {
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}
</script>
</head>

在体内：

   <body onload="initialize()">
<div style="text-align:left">
  <b><font color="red">Start: </font></b>
    <input id="start" type="textbox" value="Thuis">

  <font color="red"><b>Waypoints:</b></font>
<select multiple id="waypoints">
  <option value="50.96012,5.841106">WP 1</input>
  <option value="50.958758,5.850166">WP 2</input>
  <option value="50.947603,5.856555">WP 3</input>
  <option value="50.952706,5.867075">WP 4</input>
  <option value="50.951729,5.855134">WP 5</input>
  <option value="50.949353,5.850499">WP 6</input>
  <option value="50.95304,5.839818">WP 7</input>
  <option value="50.96291,5.847548">WP 8</input>
</select>
  <b><font color="red">End: </font></b>
<select id="end" onclick="calcRoute();">
  <option value="50.966958,5.842978">Station Geleen Oost</option>
  <option value="50.957204,5.836648">Parkeer plaats Driepoel, Geleen</option>
  <option value="50.953409,5.84662">Pastoor Thissenplein, Sweikhuizen</option>
  <option value="50.936529,5.894342">Alfa brouwerij/ Restaurant, Thull</option>
  <option value="50.972853,5.883254">Ijsboerderij Coumans, Windraak</option>
</select>
  <input type="button" value="start" onclick="calcRoute()">
</div>
<div id="map_canvas" style="top:20px;width:50%;height:70%"></div>
&nbsp;
<div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div>

我一点头绪都没有。

如果有人可以帮助我，我将不胜感激！！！

提前致谢

义

4

1 回答 1

0

您已将stopover设置为 true。在这种情况下，路线（腿）将在航点处分开，但您只迭代第一条腿。

试试看：

function showSteps(directionResult) {
    var k       = 0,
        myRoute = directionResult.routes[0];

  for (var j = 0; j < myRoute.legs.length; j++) {//iterate over legs
  for (var i = 0; i < myRoute.legs[j].steps.length; i++) {//iterate over steps
      var marker = new google.maps.Marker({
        position: myRoute.legs[j].steps[i].start_point,
        map: map
      });
      attachInstructionText(marker,  myRoute.legs[j].steps[i].instructions);
      markerArray[k++] = marker;
  }}
 }
于 2012-06-11T16:50:40.583 回答