[RESOLU] récupérer variables js dans un script en php

Eléphanteau du PHP | 33 Messages

06 mars 2017, 15:00

Bonjour, j'ai ce scirpt qui me permet d'afficher un polygone sur une map en javascript, cependant j'aimerai passer certaines variables de mon code dans un certain script php, j'ai bien comprit qu'il fallait se servir d'ajax, et j'y arrive pour des formes telles qu'un cercle ou rectangle, mais la le polygone me pose problème et j'arrive pas du tout à m'en sortir

Code : Tout sélectionner

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3 Example: Polygon Arrays</title> <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map; var infoWindow; function initialize() { var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875); var myOptions = { zoom: 5, center: myLatLng, mapTypeId: google.maps.MapTypeId.TERRAIN }; var bermudaTriangle; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var triangleCoords = [ new google.maps.LatLng(25.774252, -80.190262), new google.maps.LatLng(18.466465, -66.118292), new google.maps.LatLng(32.321384, -64.75737) ]; bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 3, fillColor: "#FF0000", fillOpacity: 0.35 }); google.maps.event.addListener(bermudaTriangle, 'mouseover', function() { bermudaTriangle.setOptions({ editable: true }); }); google.maps.event.addListener(bermudaTriangle, 'mouseout', function() { bermudaTriangle.setOptions({ editable: false }); }); google.maps.event.addListener(bermudaTriangle.getPath(), 'set_at', function() { console.log(bermudaTriangle.getPath()); }); bermudaTriangle.setMap(map); // Add a listener for the click event google.maps.event.addListener(bermudaTriangle, 'click', showArrays); infowindow = new google.maps.InfoWindow(); } function showArrays(event) { // Since this Polygon only has one path, we can call getPath() // to return the MVCArray of LatLngs var vertices = this.getPath(); var contentString = "<b>Bermuda Triangle Polygon</b><br />"; contentString += "Clicked Location: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />"; // Iterate over the vertices. for (var i =0; i < vertices.length; i++) { var xy = vertices.getAt(i); contentString += "<br />" + "Coordinate: " + i + "<br />" + xy.lat() +"," + xy.lng(); } // Replace our Info Window's content and position infowindow.setContent(contentString); infowindow.setPosition(event.latLng); infowindow.open(map); } </script> </head> <body onload="initialize()"> <div id="map_canvas"></div> </body> </html>
je pensais faire un script comme ceci pour récupérer les variables mais a chaque fois il y a un problème avec les textcontent:Uncaught TypeError: Cannot read property 'textContent' of null

Code : Tout sélectionner

// Ce fichier nous permet de faire le lien entre le programme JavaScript qui s'effectue du coté client // Et du programme PHP qui s'effectue du coté serveur var validation = function(){ // quand on clique sur le bouton Valider, cette fonction va s'executer // Définition des variables pour AJAX var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); oXhr.onreadystatechange = function(){ if( oXhr.readyState === 4 && oXhr.status === 200){ alert(oXhr.responseText); } }; // On récupère les valeurs des select var lat_point = document.getElementById('lat_point').textContent; // On récupère les valeurs des select var long_point = document.getElementById('lng_point').textContent; var _id_cap = document.getElementById('_id_cap').textContent; // On définit la méthode à utiliser et l'url de la page à charger oXhr.open('POST', 'enregistrement.php', true); oXhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // On définit quelles variables envoyer oXhr.send("&_id_cap="+_id_cap+"&latitude_centre="+lat_point+"&longitude_centre="+long_point); };
Le but étant de récupérer les latitudes et longitudes de chaque point afin de les imlplanter (issu du script php) ma base de donnée.
Voila merci pour vos réponses :)

Avatar de l’utilisateur
Modérateur PHPfrance
Modérateur PHPfrance | 8755 Messages

06 mars 2017, 16:29

salut,

merci d'éviter de créer plusieurs sujet identique.

dans ton JS tu ne récupères qu'un couple latitude / longitude or un polygone en comporte plusieurs :-)
c'est la même chose que pour le rectangle / carré sauf que tu peux avoir des points en plus (ou en moins dans ton cas). Il faut donc que tu gère une liste de coordonnées.

utilise la notation tableau pour cela
&latitute[0]=xxx&longitude[0]=yyy&latitute[1]=xxx&longitude[1]=yyy&latitute[2]=xxx&longitude[2]=yyy&latitute[3]=xxx&longitude[3]=yyy&latitute[4]=xxx&longitude[4]=yyy etc.
coté php, vu que tu utilises POST pour la requête tu auras des tableaux dans $_POST['longitude'] et $_POST ['latitude'].
en construisant dynamiquement la chaîne des paramètres et en utilisant le même index dans le tableaux tu auras les données aux mêmes index dans les deux tableau et pourras les utiliser de façon simple.
une autre solution est de créer un objet json contenant ta liste d'info et de coller sans dans le corps de la requête (pour le récupérer http://stackoverflow.com/questions/8945 ... ost-in-php) ensuite utilise json_decode pour un tableau d'objet utilisable simplement.
c'est la bonne solution pour avoir quelque chose de relativement simple à utiliser sans douter des index du tableau ;)

Dans tous les cas tu auras un nombre de paramètre flexible te permettant de gérer n'importe quel nombre de coin sur ton polygone.

@+
Il en faut peu pour être heureux ......

Eléphanteau du PHP | 33 Messages

06 mars 2017, 16:39

je suis d'accord avec toi cependant pour la récup de données, si j'utilise déjà ceci dans le script principal:

Code : Tout sélectionner

function showArrays(event) { // Since this Polygon only has one path, we can call getPath() // to return the MVCArray of LatLngs var vertices = this.getPath(); var contentString = "<b>Bermuda Triangle Polygon</b><br />"; contentString += 'Clicked Location: <br />'+ event.latLng.lat() + ',' + event.latLng.lng() ; // Iterate over the vertices. for (var i =0; i < vertices.length; i++) { var xy = vertices.getAt(i); contentString += '<br />' + 'Coordinate: ' + i + '<br /><span id="lat_point">' + xy.lat() +'</span> , <span id="lng_point">' + xy.lng()+'</span><br />'; } // Replace our Info Window's content and position infowindow.setContent(contentString); infowindow.setPosition(xy); infowindow.open(map); }
pour l'ajax, les variables de récup, je devrais faire une boucle ? car sinon ceci ne marche pas (après je sais pas trop si ce qui est écrit est juste)

Code : Tout sélectionner

var validation = function(){ // quand on clique sur le bouton Valider, cette fonction va s'executer // Définition des variables pour AJAX var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); oXhr.onreadystatechange = function(){ if( oXhr.readyState === 4 && oXhr.status === 200){ alert(oXhr.responseText); } }; // On récupère les valeurs des select var lat_point = document.getElementById('lat_point').textContent; // On récupère les valeurs des select var long_point = document.getElementById('lng_point').textContent; var _id_cap = document.getElementById('_id_cap').textContent; // On définit la méthode à utiliser et l'url de la page à charger oXhr.open('POST', 'enregistrement.php', true); oXhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // On définit quelles variables envoyer oXhr.send("&_id_cap="+_id_cap+"&latitude_centre="+lat_point+"&longitude_centre="+long_point); };

Eléphanteau du PHP | 33 Messages

06 mars 2017, 17:54

J'ai essayé de voir avec ta porposition de faire un tableau mais je vois pas trop comment utiliser ceci, car je suppose que ce tableau devrais être fait sur le script qui permet de récupérer les coordonnées

Avatar de l’utilisateur
Modérateur PHPfrance
Modérateur PHPfrance | 8755 Messages

07 mars 2017, 11:01

ben
var tablo = []
tablo.push({longitude:12,latitude:42});
regarde de la doc pour la manipulation des tableaux en javascript.

@+
Il en faut peu pour être heureux ......