Discussion :

[Msysteme]

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é

[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).

[Msysteme]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

[NoSmoking]

Bonjour,

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 ?

[Msysteme]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Msysteme]

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

ma fonction initialize() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);*/
 
}