Evénement sur google map

**Kevfou** · 22/03/2016, 15h30

Envoyé par dukoid

* déjà tu indiques 2 soucis et tu expliques qu'un seul

Oui j'ai édité mon message après car j'avais résolu le premier soucis et j'ai oublié de corriger ce détail au début du message

Envoyé par dukoid

* tu ne suis pas mes indications :
$latitude = json_decode( $session->get('lat') );

Pour récupérer les informations provenant de ajax, la façon que tu m'as indiqué ne fonctionnait pas.
J'ai donc utiliser celle-ci qui fonctionne :

Code :

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

1
2
 
$latitude = $request->request->get('lat');

Envoyé par dukoid

pour répondre à ta requete AJAX, j'ai indiqué que c'était ainsi :

Code :

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

1
2
3
4
 
                $response = new Response( "ici tu mets ta réponse , un objet, un tableau, un texte    CE QUE TU VEUX " );                 
                $response->headers->set('Content-Type', 'application/json');
                return $response;

Concernant le renvoie vers ajax, il y a deux façon de le faire en symfony 2.
En utilisant en effet Response et donc il faut faire un json_encode($var) et mettre a jour le header comme tu l'indiques, soit en utilisant la classe JsonResponse qui en fait permet en une ligne de faire ce que Response fait en deux lignes. Une sorte d'allias donc.

Code :

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

1
2
3
4
 
$response = new Response(json_encode($lol));
$response->headers->set('Content-Type', 'application/json');
return $response;

Code :

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

1
2
 
return new JsonResponse($lol);

Envoyé par dukoid

ATTENTION: avec un message en objet ou tableau il y a une histoire de sérialisation et déserialisation me semble t'il ?
[COLOR="#0000CD"]

Oui tu as raison, c'est ici que j'ai le vrai problème. Ma fonction PHP me retourne un ensemble de route entre le point cliqué et des fiches sous la forme d'objet.
Je dois donc stocker les objet dans un tableau et renvoyer ce tableau.
Et si je souhaite faire cela, c'est parce que je peux me retrouver avec 2-3 objets Route mais aussi 10-15 objets Route.
Cette histoire de serialisation, je vais regarder du côté de Symfony, je n'ai jamais eu l'occasion de faire cela auparavant.

**dukoid** · 22/03/2016, 16h41

ok, très bien

**Kevfou** · 24/03/2016, 11h12

Bonjour Dukoid,

J'ai réussi à sérialiser mon tableau en JSON avec le bundle JMSSerializerBundle.
Je le reçois bien dans ma requête ajax, je ne peux pas l'afficher ici en entier, c'est trop long, voici la requête ajax pour rappel :

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
$.ajax({
                    type: "POST",
                    data: {"lat": lat,"lng": lng},
                    url: "{{ url('projet_app_map_ajax') }}",
                    dataType: 'json',
                    success: function (response, statut) {
                        $.each(response, function(index, element) {
                                    console.log(element.javascript_variable);
                        });
 
                    },
                    error: function (resultat, statut, erreur) {
                        console.log("ERREUR " + erreur + resultat);
                    }
                });

Et le résultat

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
string(35634) "[
	{"bound":
		{
			"javascript_variable":"bound_56f3aa6548fcc172980706",
			"south_west":{
			"javascript_variable":"coordinate_56f3aa6548fb6122597355",
			"latitude":49.176968,
			"longitude":-0.3541515,
			"no_wrap":true
			},
			"north_east":{
			"javascript_variable":"coordinate_56f3aa6548fc5436145092",
			"latitude":49.2052817,
			"longitude":-0.3234466,
			"no_wrap":true},
			"extends":[],
			},
			"copyrights":"Map data \u00a92016 Google",
			"legs":
			[
				{
					"distance",{
						"text":"6.8 km",
						"value":6782
					},
					"duration":{
						"text":"11 mins",
						"value":675
					},
					"end_address":"4 Quai Amiral Hamelin, 14000 Caen, France",
					"end_location":{
						"javascript_variable":"coordinate_56f3aa654920a982102165",
						"latitude":49.176968,
						"longitude":-0.3541515,
						"no_wrap":true
					},
					"start_address":"313 Boulevard du Val Porte 3, 14200 H\u00e9rouville-Saint-Clair, France",
					"start_location":{
						"javascript_variable":"coordinate_56f3aa6549213662500685",
						"latitude":49.2052817,
						"longitude":-0.330406,
						"no_wrap":true
					},
					"steps":
					[
						{
							"distance":{"text":"61 m","value":61},
							"duration":{"text":"1 min","value":15},
							"end_location":{"javascript_variable":"coordinate_56f3aa6549220060654019","latitude":49.2049871,"longitude":-0.3310878,"no_wrap":true},
							"instructions":"Head southwest<\/b> on Boulevard du Val Porte 3<\/b>",
							"encoded_polyline":{"javascript_variable":"encoded_polyline_56f3aa654952f688564287","options":[],"value":"_likH`p_ABHBHBFBHBHDNH`@DPBH@DHB"},
							"start_location":{"javascript_variable":"coordinate_56f3aa6549536730643455","latitude":49.2052817,"longitude":-0.330406,"no_wrap":true},"travel_mode":"DRIVING"
						},
						{
							"distance":{"text":"88 m","value":88},
							"duration":{"text":"1 min","value":29},
							"end_location":{"javascript_variable":"coordinate_56f3aa6549692610601842","latitude":49.204258,"longitude":-0.330922,"no_wrap":true},
							"instructions":"Turn left<\/b> to stay on Boulevard du Val Porte 3<\/b>",
							"encoded_polyline":{"javascript_variable":"encoded_polyline_56f3aa65496a1257854438","options":[],"value":"ejikHht_ABAFE|@k@TMHBHFPJJF"},
							"start_location":{"javascript_variable":"coordinate_56f3aa65496a5897869684","latitude":49.2049871,"longitude":-0.3310878,"no_wrap":true},
							"travel_mode":"DRIVING"
						},
						{
							"distance":{"text":"0.7 km","value":730},
							"duration":{"text":"2 mins","value":136},
							"end_location":{"javascript_variable":"coordinate_56f3aa65496b3573672045","latitude":49.203139,"longitude":-0.340375,"no_wrap":true},
							"instructions":"Turn right<\/b> onto Avenue de la Valeuse<\/b>",
							"encoded_polyline":{"javascript_variable":"encoded_polyline_56f3aa65496bb402231021","options":[],"value":"seikHfs_ABZDT@H@LBJ@LJbAJ`BD`A@f@?\\EhF?Z?j@CdF?|@@^@F@B?B?@?|BA~@?b@AfB?F?~@?dA?`@Dd@Nr@L\\NXV\\HLJPHVFNr@bAJR"},
							"start_location":{"javascript_variable":"coordinate_56f3aa65496c1963355547","latitude":49.204258,"longitude":-0.330922,"no_wrap":true},
							"travel_mode":"DRIVING"
						},
						{
							"distance":{"text":"0.4 km","value":436},
							"duration":{"text":"1 min","value":55},
							"end_location":{"javascript_variable":"coordinate_56f3aa65496cf666414334","latitude":49.2003097,"longitude":-0.3441005,"no_wrap":true},
							"instructions":"At the roundabout, take the 2nd<\/b> exit and stay on Avenue de la Valeuse<\/b>",
							"encoded_polyline":{"javascript_variable":"encoded_polyline_56f3aa65496d8031066090","options":[],"value":"s~hkHjnaA?DAP?RBVBTFRHPNNLJJ@J?B@B?F?FALCB?B?BBFDDFnBpCj@z@T\\\\d@FJtAnBFFx@lAf@z@NZ"},
							"start_location":{"javascript_variable":"coordinate_56f3aa65496db456979559","latitude":49.203139,"longitude":-0.340375,"no_wrap":true},
							"travel_mode":"DRIVING"
						},
						{
							"distance":{"text":"0.2 km","value":157},
							"duration":{"text":"1 min","value":22},
							"end_location":{"javascript_variable":"coordinate_56f3aa65496e8335355216","latitude":49.199329,"longitude":-0.3454709,"no_wrap":true},
							"instructions":"At the roundabout, take the 2nd<\/b> exit onto Avenue de la Grande Cav\u00e9e<\/b>\/Avenue de la Valeuse<\/b>",
							"encoded_polyline":{"javascript_variable":"encoded_polyline_56f3aa65496f0426999181","options":[],"value":"}lhkHrebA?H?F?H@JBJFNHJFHH@D?D?JALLDJPXJP@@NVHNB@R\\BFV^"},
							"start_location":{"javascript_variable":"coordinate_56f3aa65496f4859856747","latitude":49.2003097,"longitude":-0.3441005,"no_wrap":true},"travel_mode":"DRIVING"
						},
						{
							"distance":{"text":"0.5 km","value":542},
							"duration":{"text":"1 min","value":48},
							"end_location":{"javascript_variable":"coordinate_56f3aa6549702840801047","latitude":49.1974674,"longitude":-0.3410331,"no_wrap":true},
							"instructions":"At the roundabout, take the 4th<\/b> exit onto the P\u00e9riph\u00e9rique Est<\/b> ramp to Paris<\/b>\/H\u00e9rouville-Est<\/b>\/Ouistreham-Car Ferry<\/b>",
							"encoded_polyline":{"javascript_variable":"encoded_polyline_56f3aa6549709400069364","options":[],"value":"yfhkHdnbAALAH?H?J@LBPDNFLDFHHFDHBH?LAB?B?DA@?DEDGDGDIDSBO@I?I?IAOAMEOCIIQIIIEGCKCI"},
							"start_location":{"javascript_variable":"coordinate_56f3aa654970c204959808","latitude":49.199329,"longitude":-0.3454709,"no_wrap":true},
							"travel_mode":"DRIVING"
						},
						{
							"distance":{"text":"2.3 km","value":2308},
							"duration":{"text":"2 mins","value":119},
							"end_location":{"javascript_variable":"coordinate_56f3aa6549719825711622","latitude":49.1801483,"longitude":-0.3236026,"no_wrap":true},
							"instructions":"Merge onto N814<\/b>",
							"encoded_polyline":{"javascript_variable":"encoded_polyline_56f3aa6549721907323296",
							"options":[],
							"value":"e"},
							"start_location":{"javascript_variable":"coordinate_56f3aa6549724587604020","latitude":49.1974674,"longitude":-0.3410331,"no_wrap":true},
							"travel_mode":"DRIVING"
						},
						{
							"distance":{"text":"0.3 km","value":315},
							"duration":{"text":"1 min","value":26},
							"end_location":{"javascript_variable":"coordinate_56f3aa6549732542792188","latitude":49.1800902,"longitude":-0.3267583,"no_wrap":true},
							"instructions":"Take exit 2-Montalivet<\/b> toward Montalivet<\/b>\/Mondeville<\/b>\/Cabourg<\/b>",
							"encoded_polyline":{"javascript_variable":"encoded_polyline_56f3aa6549739736440159","options":[],"value":"}ndkHne~@RMFCHEHCHCF@D@JBB@BB@?@B@@@@BFBHBJDPNx@BR@F@L?N?J?NAPE\\ANUtA?@ERIh@WpAW|ACLEHEJGLIH"},
							"start_location":{"javascript_variable":"coordinate_56f3aa654973d226486673","latitude":49.1801483,"longitude":-0.3236026,"no_wrap":true},"travel_mode":"DRIVING"
						},
						{
							"distance":{"text":"1.4 km","value":1434},
							"duration":{"text":"2 mins","value":102},
							"end_location":{"javascript_variable":"coordinate_56f3aa6549749113013807","latitude":49.1795414,"longitude":-0.3457456,"no_wrap":true},
							"instructions":"Turn left<\/b> onto Cours Montalivet<\/b>\/D513<\/b> (signs for Caen Montalivet<\/b>\/Gare S.N.C.F<\/b>)Continue to follow Cours Montalivet<\/div>",
							"encoded_polyline":{"javascript_variable":"encoded_polyline_56f3aa6549751495099630","options":[],"value":"qndkHfy~@KLGFw@\\GDSTRjA\\~BdAhITdCPpBVpDNhCPxD@JJjCD~ADvC@bDSh`@?XAdEIlO?t@"},
							"start_location":{"javascript_variable":"coordinate_56f3aa6549754137440282","latitude":49.1800902,"longitude":-0.3267583,"no_wrap":true},"travel_mode":"DRIVING"
						},
						{
							"distance":{"text":"0.7 km","value":711},
							"duration":{"text":"2 mins","value":123},
							"end_location":{"javascript_variable":"coordinate_56f3aa6549760975965493","latitude":49.176968,"longitude":-0.3541515,"no_wrap":true},
							"instructions":"Continue onto Quai Amiral Hamelin<\/b>Go through 1 roundabout<\/div>Destination will be on the left<\/div>",
							"encoded_polyline":{"javascript_variable":"encoded_polyline_56f3aa6549768760134069","options":[],"value":"ckdkH|obAIdGCvA?d@@`@Dp@B`@F^DZBLHT?@?@A@?@?@?@?B?@?@?@?@?@?@?B?@?@?@@@?@?@@@?B@??@?@@@@@?@@??@@??@@?@??@@?@?@?@?@?@?@??A@?@A@??ANb@Pl@x@jCPd@Tp@b@nABHRj@@FZv@DNp@hBRl@Nd@BHHPzBrG"},
							"start_location":{"javascript_variable":"coordinate_56f3aa654976b244668440","latitude":49.1795414,"longitude":-0.3457456,"no_wrap":true},
							"travel_mode":"DRIVING"
						}
					],
					"via_waypoints":[]
				}
			],
			"overview_polyline":{
				"javascript_variable":"encoded_polyline_56f3aa65498e6097929144",
				"options":[],
				"value":"_likH`p_ANd@XlADNL@dAq@TMHBZRJFBZF^DXLpAPbD@dAEdGCnIDn@CxMDfA\\pA|@vAPf@~@vAAVBj@Jh@X`@LJJ@N@J?TEF?JHvDrFbChD`BhCNZ?H?PDVPZFHH@J?JALLVd@JP^j@Vd@V^ALAR@XH`@LTPNRBZCRUJ]DYCq@IYS",
			},
			"summary":"N814",
			"warnings":[],
			"waypoint_order":[]
		},

A la suite, il y a le même tableau avec des informations différentes.
Ce que je veux récupérer, c'est la ligne en gras rouge:
overview_polyline->javascript_variable
Le résultat doit-être : encoded_polyline_56f3aa65498e6097929144

Je n'arrive pas a parser le json en jquery, si je fais un :

Code :

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

1
2
3
$.each(response, function(index, element) {
    console.log(element.javascript_variable);
});

J'ai le droit à une erreur :

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in [{"bound":{"javascript_variable"........

Merci =)

**dukoid** · 24/03/2016, 11h55

normal !!!

Le résultat que tu as est le suivant :

Code :

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

1
2
3
4
5
string(35634) "[
	{"bound":
		{
			"

c'est un string et donc un objet ou un tableau qui a été encodé en string ! ET oui parceque tu te doutes bien quand tu as étudié le HTTP et les requêtes, les infos qui circulent sont sous la forme de texte.....

DONC dans ton success, il faut ........ ???????? DEVINE ????? le décoder, en javascript avec : JSON.parse je crois, avant d'y avoir accès en tant qu'objet ou tableau !

**Kevfou** · 24/03/2016, 20h45

Eh bien merci encore une fois Dukoid.

Je pensais que le fait de mettre dataType: 'json' dans la requête ajax, en plus d'indiqué que la réponse reçue est en JSON, se chargeait de le décoder..

Evénement sur google map

Symfony PHP

Discussions similaires

Partager

Partager