Tracer un itinéraire à partir d'un ensemble de points

Version imprimable

28/05/2014, 14h30
Msysteme

Tracer un itinéraire à partir d'un ensemble de points

Bonjour, j'ai une dizaine de point (Lat, long), comment puis je tracer un itinéraire en suivant ces points

JE cherche un exemple sur google je n'ai rien trouvé
28/05/2014, 14h54
Spartacusply

Tracer des droites entre chaque point : utiliser l'objet Polyline

Tracer un trajet qui passe entre tous ces points : utiliser un DirectionService avec Waypoints. Limiter à 8 points d'étapes (plus l'origine, plus la destination).

voila, je cherche a tracer un itineraire, comme ceci
https://maps.google.fr/maps?saddr=Me...ra=ls&t=m&z=13

j'ai choisi de definir 3 point en plus de l'origine et la destination
pour cela j'ai fait :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
//Itinéraire
 
function CalculItineraire(origine, pointA, pointB, pointC, dest) {
    var tableau = new Array();
 
    if (origine != "") {
        tableau.push(origine);
    }
    if (pointA != "") {
        tableau.push(pointA);
    }
 
    if (pointB != "") {
        tableau.push(pointB);
    }
 
    if (pointC != "") {
        tableau.push(pointC);
    }
 
    if (dest != "") {
        tableau.push(dest);
    }
 
    for (var i = 0; i + 1 < tableau.length; i++) {
        calcRouteBis(tableau.valueOf(i), tableau.valueOf(i + 1));
    }
}
 
function calcRouteBis(pointA, pointB) { // Calcul de l'itinéraire.
    var directionsService = new google.maps.DirectionsService();
    var start = pointA;
    var end = pointB;
    if (start != '' && end != '') {
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function (result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(result);
            }
        });
    }
    else
        alert("Veuillez saisir un lieu de départ ET d'arrivée.");
}

en suivant la discussion suivante :
http://www.developpez.net/forums/d13...aire-3-points/

mais je n'ai pas compris ce qui manque a la solution ??? sachant que mes points je vais les récupérer a partir de ma base des données

28/05/2014, 15h13
Spartacusply

Ce n'est pas la bonne méthode de faire. Regarde plutôt le lien que je t'ai posté.

Il faut utiliser l'options "waypoints" dans l'objet request qui est passé au directionservice.
28/05/2014, 19h11
NoSmoking

Bonjour,

Citation:

Envoyé par Msysteme

en suivant la discussion suivante :
http://www.developpez.net/forums/d13...aire-3-points/

mais je n'ai pas compris ce qui manque a la solution ??? sachant que mes points je vais les récupérer a partir de ma base des données

quand tu lis une discussion il te faut aller jusqu'à la fin.

PS: Toujours pas accro de la documentation officielle qui pourtant regorge d'exemples ?

voila j'ai récupéré mes données (5 points) a partir de ma bd:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//itinéraire
 
            origine = oDBDataReader["Point1"].ToString();
            dest = oDBDataReader["Point5"].ToString();
            waypoints[0] = oDBDataReader["Point2"].ToString();
            waypoints[1] = oDBDataReader["Point3"].ToString();
            waypoints[2] = oDBDataReader["Point4"].ToString();
 
        }
        connection.Close();
 
        StringBuilder builder = new StringBuilder();
        builder.Append("[");
        for (int i = 0; i < 3; ++i)
        {
            builder.Append("['");
 
            builder.Append(waypoints[i]);
 
            builder.Append("']");
 
            if (i != 3 - 1)
            {
                builder.Append(",");
            }
        }
        builder.Append("]");
 
        string result2 = builder.ToString();
 
        btnAfficher.Attributes.Add("onClick", "javascript:calcRoute('" + origine + "','" + dest +"',"+ 
        result2+"); return false;");

j'ai changé mon code comme spartacusply m'a conseillé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//Itinéraire
function calcRoute(origine, dest, waypoints) {
    var start = origine;
    var end = dest;
    var waypts = [];
    //var checkboxArray = document.getElementById('waypoints');
    for (var i = 0; i < waypoints.length; i++) {
        //if (waypoints.options[i].selected == true) {
            waypts.push({
                location: waypoints[i],//.value
                stopover: true
            });
        //}
    }
 
    var request = {
        origin: start,
        destination: end,
        waypoints: waypts,
        optimizeWaypoints: true,
        travelMode: google.maps.TravelMode.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>';
            }*/
        }
    });
}

mais rien ne s'affiche:roll:

'j'ai bien vérifié a l'aide des alerts les valeurs de waypoints, tout est dans l'ordre

ma fonction initialize() :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
var geocoder;
var map;
var markers = Array();
var infos = Array();
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
 
 
function initialize() {
    // Check connexion
        var status = navigator.onLine;
        if (status) {
        } else {
            alert("Pas de connexion internet");
        }
 
        directionsDisplay = new google.maps.DirectionsRenderer();
 
    // prepare Geocoder
        geocoder = new google.maps.Geocoder();
 
        // set initial position (ville)
        var myLatlng = new google.maps.LatLng(34.2500000, -6.5833330);
 
        var myOptions = { // default map options
            zoom: 14,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
 
        map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
        directionsDisplay.setMap(map);
 
        google.maps.event.addListener(map, 'rightclick', function (event) {
            clearOverlays();
            placeMarker(event.latLng);
        });
 
  /*
        var origineC = new google.maps.LatLng(34.6880454862, -6.0044980421);
        var myCity = new google.maps.Circle({
          center: origineC,
          radius:68000,
          strokeColor:"#0000FF",
          strokeOpacity:0.6,
          strokeWeight:2,
          fillColor:"#0000FF",
          fillOpacity:0.1
          });
 
        myCity.setMap(map);*/
 
}