Polylines bug affichage ?

**Mugette** · 07/02/2013, 17h54

Bonjour,
Pour mon application je souhaite afficher les trajets effectués par un véhicule.
Je récupère des liste coordonnées en JSON et créer mon objet polyline.
Dans le cas ou je récupère 1 ou 2 trajet(s), tout va bien ;le problème est lorsque je récupère 3 trajets et plus, certains Marker Arrivée ou Départ se rejoignent alors qu'il n'ont aucun rapport l'un par rapport à l'autre.
Je n'ai pas d'erreur JS ou autre, mais l'affichage est un peu incohérent.

Voici le code de ma fonction de création de mes Polyline:

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
 
$.fn.displayTrip = function(map){
    var listTrips = $('[data-trips]').data('trips');
    $(listTrips).each(function(i, trip){
	var tripPath = [];
	var tripsCoordinates = [];
        $('#map_canvas').gmap('addMarker',{position:new google.maps.LatLng(trip.startpath.lat,trip.startpath.lng),icon:trip.startpath.icon});
        $('#map_canvas').gmap('addMarker',{position:new google.maps.LatLng(trip.endpath.lat,trip.endpath.lng),icon:trip.endpath.icon});
        var color = "#0000FF";
	for(var j=0 ;j < trip.steps.length; j++){tripsCoordinates.push(new google.maps.LatLng(trip.steps[j].lat, trip.steps[j].lng));}
	tripPath = new google.maps.Polyline({path:tripsCoordinates,strokeColor:"#0000FF",strokeOpacity:1,strokeWeight:2});
	tripPath.setMap(map);
    });
    map.setZoom(15);
}

Et voici le type de données que je récupère :

Code :

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

1
2
 
[{"startpath":{"lat":48.827915,"lng":2.24139,"icon":"depart.png"},"steps":[{"lat":48.827915,"lng":2.24139,"date":"2013-02-05T07:23:16+01:00"},{"lat":48.827933,"lng":2.24134,"date":"2013-02-05T07:24:02+01:00"},{"lat":48.830055,"lng":2.239195,"date":"2013-02-05T07:37:21+01:00"},{"lat":48.829532,"lng":2.23682,"date":"2013-02-05T07:39:33+01:00"},{"lat":48.829523,"lng":2.236167,"date":"2013-02-05T07:39:46+01:00"},{"lat":48.830495,"lng":2.235375,"date":"2013-02-05T07:41:15+01:00"},{"lat":48.83061,"lng":2.234842,"date":"2013-02-05T07:42:05+01:00"},{"lat":48.830935,"lng":2.235247,"date":"2013-02-05T07:43:14+01:00"},{"lat":48.831777,"lng":2.237727,"date":"2013-02-05T07:43:40+01:00"},{"lat":48.832715,"lng":2.240175,"date":"2013-02-05T07:44:27+01:00"},{"lat":48.833473,"lng":2.242632,"date":"2013-02-05T07:45:04+01:00"},{"lat":48.83428,"lng":2.245087,"date":"2013-02-05T07:45:22+01:00"},{"lat":48.835128,"lng":2.248017,"date":"2013-02-05T07:46:07+01:00"},{"lat":48.835548,"lng":2.249442,"date":"2013-02-05T07:47:38+01:00"},{"lat":48.835872,"lng":2.249708,"date":"2013-02-05T07:47:48+01:00"},{"lat":48.836882,"lng":2.252012,"date":"2013-02-05T07:48:07+01:00"},{"lat":48.837252,"lng":2.251827,"date":"2013-02-05T07:48:20+01:00"},{"lat":48.837975,"lng":2.251322,"date":"2013-02-05T07:48:37+01:00"},{"lat":48.838198,"lng":2.252132,"date":"2013-02-05T07:49:45+01:00"},{"lat":48.83815,"lng":2.25242,"date":"2013-02-05T07:50:14+01:00"},{"lat":48.843303,"lng":2.256508,"date":"2013-02-05T09:30:04+01:00"},{"lat":48.844948,"lng":2.257422,"date":"2013-02-05T09:30:31+01:00"},{"lat":48.845348,"lng":2.25782,"date":"2013-02-05T09:30:41+01:00"},{"lat":48.845433,"lng":2.258662,"date":"2013-02-05T09:31:20+01:00"},{"lat":48.84712,"lng":2.259252,"date":"2013-02-05T09:31:41+01:00"},{"lat":48.847972,"lng":2.259945,"date":"2013-02-05T09:32:25+01:00"},{"lat":48.848078,"lng":2.262603,"date":"2013-02-05T09:33:17+01:00"},{"lat":48.848497,"lng":2.26521,"date":"2013-02-05T09:34:31+01:00"},{"lat":48.8499,"lng":2.266798,"date":"2013-02-05T09:35:24+01:00"},{"lat":48.850215,"lng":2.267008,"date":"2013-02-05T09:35:29+01:00"},{"lat":48.829895,"lng":2.260357,"date":"2013-02-05T11:35:53+01:00"},{"lat":48.829267,"lng":2.262798,"date":"2013-02-05T11:36:40+01:00"},{"lat":48.82848,"lng":2.265388,"date":"2013-02-05T11:37:25+01:00"},{"lat":48.827758,"lng":2.267885,"date":"2013-02-05T11:38:00+01:00"}],"endpath":{"lat":48.827933,"lng":2.24134,"icon":"arrivee.png"}},{"startpath":{"lat":48.827843,"lng":2.24138,"icon":"depart.png"},"steps":[{"lat":48.827843,"lng":2.24138,"date":"2013-02-05T07:35:06+01:00"},{"lat":48.829443,"lng":2.239948,"date":"2013-02-05T07:37:06+01:00"},{"lat":48.830055,"lng":2.239195,"date":"2013-02-05T07:37:21+01:00"},{"lat":48.829532,"lng":2.23682,"date":"2013-02-05T07:39:33+01:00"},{"lat":48.829523,"lng":2.236167,"date":"2013-02-05T07:39:46+01:00"},{"lat":48.830495,"lng":2.235375,"date":"2013-02-05T07:41:15+01:00"},{"lat":48.83061,"lng":2.234842,"date":"2013-02-05T07:42:05+01:00"},{"lat":48.830935,"lng":2.235247,"date":"2013-02-05T07:43:14+01:00"},{"lat":48.831777,"lng":2.237727,"date":"2013-02-05T07:43:40+01:00"},{"lat":48.832715,"lng":2.240175,"date":"2013-02-05T07:44:27+01:00"},{"lat":48.833473,"lng":2.242632,"date":"2013-02-05T07:45:04+01:00"},{"lat":48.83428,"lng":2.245087,"date":"2013-02-05T07:45:22+01:00"},{"lat":48.835128,"lng":2.248017,"date":"2013-02-05T07:46:07+01:00"},{"lat":48.835548,"lng":2.249442,"date":"2013-02-05T07:47:38+01:00"},{"lat":48.835872,"lng":2.249708,"date":"2013-02-05T07:47:48+01:00"},{"lat":48.836882,"lng":2.252012,"date":"2013-02-05T07:48:07+01:00"},{"lat":48.837252,"lng":2.251827,"date":"2013-02-05T07:48:20+01:00"},{"lat":48.837975,"lng":2.251322,"date":"2013-02-05T07:48:37+01:00"},{"lat":48.838198,"lng":2.252132,"date":"2013-02-05T07:49:45+01:00"},{"lat":48.83815,"lng":2.25242,"date":"2013-02-05T07:50:14+01:00"},{"lat":48.843303,"lng":2.256508,"date":"2013-02-05T09:30:04+01:00"},{"lat":48.844948,"lng":2.257422,"date":"2013-02-05T09:30:31+01:00"},{"lat":48.845348,"lng":2.25782,"date":"2013-02-05T09:30:41+01:00"},{"lat":48.845433,"lng":2.258662,"date":"2013-02-05T09:31:20+01:00"},{"lat":48.84712,"lng":2.259252,"date":"2013-02-05T09:31:41+01:00"},{"lat":48.847972,"lng":2.259945,"date":"2013-02-05T09:32:25+01:00"},{"lat":48.848078,"lng":2.262603,"date":"2013-02-05T09:33:17+01:00"},{"lat":48.848497,"lng":2.26521,"date":"2013-02-05T09:34:31+01:00"},{"lat":48.8499,"lng":2.266798,"date":"2013-02-05T09:35:24+01:00"},{"lat":48.850215,"lng":2.267008,"date":"2013-02-05T09:35:29+01:00"},{"lat":48.829895,"lng":2.260357,"date":"2013-02-05T11:35:53+01:00"},{"lat":48.829267,"lng":2.262798,"date":"2013-02-05T11:36:40+01:00"},{"lat":48.82848,"lng":2.265388,"date":"2013-02-05T11:37:25+01:00"},{"lat":48.827758,"lng":2.267885,"date":"2013-02-05T11:38:00+01:00"}],"endpath":{"lat":48.83815,"lng":2.25242,"icon":"arrivee.png"}},{"startpath":{"lat":48.838215,"lng":2.252155,"icon":"depart.png"},"steps":[{"lat":48.838215,"lng":2.252155,"date":"2013-02-05T07:56:26+01:00"},{"lat":48.837805,"lng":2.252713,"date":"2013-02-05T07:56:53+01:00"},{"lat":48.836195,"lng":2.254162,"date":"2013-02-05T07:58:25+01:00"},{"lat":48.834542,"lng":2.255567,"date":"2013-02-05T07:59:21+01:00"},{"lat":48.833933,"lng":2.255925,"date":"2013-02-05T07:59:31+01:00"},{"lat":48.833482,"lng":2.25547,"date":"2013-02-05T07:59:42+01:00"},{"lat":48.83217,"lng":2.257302,"date":"2013-02-05T08:00:20+01:00"},{"lat":48.831708,"lng":2.258242,"date":"2013-02-05T08:00:59+01:00"},{"lat":48.831123,"lng":2.257385,"date":"2013-02-05T08:01:37+01:00"},{"lat":48.830188,"lng":2.259738,"date":"2013-02-05T08:03:18+01:00"},{"lat":48.829423,"lng":2.26222,"date":"2013-02-05T08:06:25+01:00"},{"lat":48.828807,"lng":2.264782,"date":"2013-02-05T08:07:31+01:00"},{"lat":48.827923,"lng":2.267165,"date":"2013-02-05T08:07:52+01:00"},{"lat":48.827773,"lng":2.271105,"date":"2013-02-05T08:08:26+01:00"},{"lat":48.82741,"lng":2.271362,"date":"2013-02-05T08:08:40+01:00"},{"lat":48.835643,"lng":2.255703,"date":"2013-02-05T09:27:14+01:00"},{"lat":48.83739,"lng":2.256838,"date":"2013-02-05T09:28:23+01:00"},{"lat":48.83797,"lng":2.25748,"date":"2013-02-05T09:28:35+01:00"},{"lat":48.839842,"lng":2.256398,"date":"2013-02-05T09:29:13+01:00"},{"lat":48.841565,"lng":2.256075,"date":"2013-02-05T09:29:47+01:00"},{"lat":48.843303,"lng":2.256508,"date":"2013-02-05T09:30:04+01:00"},{"lat":48.844948,"lng":2.257422,"date":"2013-02-05T09:30:31+01:00"},{"lat":48.845348,"lng":2.25782,"date":"2013-02-05T09:30:41+01:00"},{"lat":48.845433,"lng":2.258662,"date":"2013-02-05T09:31:20+01:00"},{"lat":48.84712,"lng":2.259252,"date":"2013-02-05T09:31:41+01:00"},{"lat":48.847972,"lng":2.259945,"date":"2013-02-05T09:32:25+01:00"},{"lat":48.848078,"lng":2.262603,"date":"2013-02-05T09:33:17+01:00"},{"lat":48.848497,"lng":2.26521,"date":"2013-02-05T09:34:31+01:00"},{"lat":48.8499,"lng":2.266798,"date":"2013-02-05T09:35:24+01:00"},{"lat":48.850215,"lng":2.267008,"date":"2013-02-05T09:35:29+01:00"},{"lat":48.829895,"lng":2.260357,"date":"2013-02-05T11:35:53+01:00"},{"lat":48.829267,"lng":2.262798,"date":"2013-02-05T11:36:40+01:00"},{"lat":48.82848,"lng":2.265388,"date":"2013-02-05T11:37:25+01:00"},{"lat":48.827758,"lng":2.267885,"date":"2013-02-05T11:38:00+01:00"}],"endpath":{"lat":48.82741,"lng":2.271362,"icon":"arrivee.png"}}

Merci d'avance.
Mugette.

**NoSmoking** · 08/02/2013, 19h12

Bonjour,
pas vu grand chose à la lecture de ton code, donc difficile de visualiser le problème. Si tu avais une page en ligne peut être que cela aiderait.

nota : penses à indenter ton code pour le rendre plus facilement lisible.

**Mugette** · 11/02/2013, 17h20

Après quelques recherches, il s'agissait juste d'une variable mal déclarée au niveau du PHP récupérant mes différents coordonnées.
En aucun cas, il y a de bug Google, l'énervement m'a fait dire n'importe quoi.
Merci du retour quand même.
Mugette

Polylines bug affichage ? [Google Maps]

APIs Google

Discussions similaires

Partager

Partager