我正在网站上展示你可以走的几条路线。 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>
<div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div>
我一无所知。
如果有人可以帮助我,我将不胜感激!
提前致谢
易
答案 0 :(得分:0)
您已将中途停留设置为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;
}}
}