google maps waypoints numéro

J'ai un formulaire d'entrée qui permet à l'utilisateur de créer un itinéraire avec start, stop et 8 waypoints. Tout fonctionne bien mais mon problème est que toutes les entrées doivent être remplies pour que l'itinéraire soit rendu. Je ne sais pas comment résoudre ce problème afin que l'utilisateur puisse entrer seulement:google maps waypoints numéro

points de début et de fin, ou
points de début et de fin et Waypoints (autant que dont ils ont besoin, pas plus de 8 à créer l'itinéraire).

Ceci est mon code:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<title></title> 
<link href="map_style.css" rel="stylesheet"> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> 
    var directionDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var chicago = new google.maps.LatLng(37.09, -95.71); 
    var mapOptions = { 
     zoom: 4, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: chicago 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    directionsDisplay.setMap(map); 
    } 

    function calcRoute() { 
    var start = document.getElementById('start').value; 
    var end = document.getElementById('end').value; 
    var stop1 = document.getElementById("stop1").value; 
    var stop2 = document.getElementById("stop2").value; 
    var stop3 = document.getElementById("stop3").value; 
    var stop4 = document.getElementById("stop4").value; 
    var stop5 = document.getElementById("stop5").value; 
    var stop6 = document.getElementById("stop6").value; 
    var stop7 = document.getElementById("stop7").value; 
    var stop8 = document.getElementById("stop8").value; 
    var waypts= [{ location: stop1 }, { location: stop2 }, { location: stop3 }, { location: stop4 }, { location: stop5 }, { location: stop6 }, { location: stop7 }, { location: stop8 }]; 


    var request = { 
     origin: start, 
     destination: end, 
     waypoints: waypts, 
     optimizeWaypoints: true, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     var route = response.routes[0]; 
     var summaryPanel = document.getElementById('directions_panel'); 
     summaryPanel.innerHTML = ''; 
     // For each route, display summary information. 
     for (var i = 0; i < route.legs.length; i++) { 
      var routeSegment = i + 1; 
      summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>'; 
      summaryPanel.innerHTML += route.legs[i].start_address + ' to '; 
      summaryPanel.innerHTML += route.legs[i].end_address + '<br>'; 
      summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>'; 
     } 
     } 
    }); 
    } 
</script> 
</head> 
<body onload="initialize()"> 
<div id="map-canvas" style="float:left;width:70%;height:100%;"></div> 
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px"> 
<div style="margin:20px;border-width:2px;"> 

<label for="start">Start :</label> 
    <input type="text" id="start" name="start" /><br /><br /> 

<i>Add multiple Stops along the route (Optional)</i> <br /><br /> 
<label for="stop1">Stop 1 :</label> 
    <input type="text" id="stop1" name="stop1" /><br /> 
<label for="stop2">Stop 2 :</label> 
    <input type="text" id="stop2" name="stop2" /><br /> 
<label for="stop3">Stop 3 :</label> 
    <input type="text" id="stop3" name="stop3" /><br /> 
<label for="stop4">Stop 4 :</label> 
    <input type="text" id="stop4" name="stop4" /><br /> 
<label for="stop4">Stop 5 :</label> 
    <input type="text" id="stop5" name="stop5" /><br /> 
<label for="stop6">Stop 6 :</label> 
    <input type="text" id="stop6" name="stop6" /><br /> 
<label for="stop7">Stop 7 :</label> 
    <input type="text" id="stop7" name="stop7" /><br /> 
<label for="stop8">Stop 8 :</label> 
    <input type="text" id="stop8" name="stop8" /><br /><br /> 


<label for="end">Stop :</label> 
    <input type="text" id="end" name="end" /><br /> 
<br /> 
    <input type="submit" value="Create Route" onclick="calcRoute();"> 
</div> 
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> 
</div> 
</body> 
</html>

Source

2013-03-30 im2shae

Pouvez-vous publier votre fichier map_style.css - prend un effort supplémentaire pour reproduire ce que vous faites sans elle ... – Floris

Vérifiez les champs vides et en double la valeur du champ précédent là. Quand il est rendu, vous aurez un certain nombre de waypoints les uns sur les autres, mais je suppose que vous ne pouvez pas voir cela. C'est probablement la méthode qui nécessite le moins de changement dans votre code. Des changements plus importants rendraient le formulaire dynamique, en ajoutant plus de champs à mesure que l'utilisateur le remplit. L'extrait de code suivant semble être proche de ce que vous voulez ... Je l'ai testé avec un et deux waypoints, et il s'est comporté lui-même. Je n'étais toujours pas en mesure d'obtenir la carte de rendre - mais je crois que cela est dû à un problème différent, lié au fichier .css (mise en forme a un peu mutilée dans votre commentaire ...)

function calcRoute() { 
    var start = document.getElementById('start').value; 
    var end = document.getElementById('end').value;  
    var waypts = []; 
    for (var ii = 0; ii< 8; ii++) {  
     var thisStop = document.getElementById("stop" + (ii+1)).value; 
     if (thisStop.length > 0) { 
      waypts[ii] = {location: thisStop}; 
     } 
    }

// les quelques lignes suivantes sont supprimées; ramasser à nouveau de:

var request = {

Source

2013-03-30 19:07:29 Floris

Je suis désolé mais je ne comprends pas vraiment ce que vous disent. Je suis en train d'apprendre google maps. Pourriez-vous être plus précis? Merci – im2shae

est-ce censé être quelque chose comme ceci: 'code' pour (var i = 0; i im2shae

aidez-moi s'il vous plaît. Merci – im2shae

google maps waypoints numéro

Répondre

Questions connexes