[RESOLU] Recuperation latitude et longitude d'un marqueur déplaçable

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : [RESOLU] Recuperation latitude et longitude d'un marqueur déplaçable

Re: Recuperation latitude et longitude d'un marqueur déplaçable

par wil974 » 24 oct. 2016, 18:30

Ok merci de ta réponse,

mais je ne cherche pas a recuperer l'adresse ,cp ou ville ,car il seront rentrée manuelement

je cherche juste a donnée la valeur a deux variables latitude et longitude , pour inserer dans une bdd dans ma deuxieme page en php

ce que j'ai compris c'est que le code suivant : <span id="positionMarkerLatitude">

affiche la latitude , ce que je voudrais faire cette latitude c'est de la mettre dans une variable du style $lat et pouvaoir la recuperer dans l'envoie du formulaire

aie ! aie: , j'espere que je suis comprehensible dans mes propos,je suis pas un grand narrateur

:D

merci

Re: Recuperation latitude et longitude d'un marqueur déplaçable

par moogli » 24 oct. 2016, 09:22

salut,

il faut mettre les informations dans des champs de formulaires (caché ou non) pour que tu puisses l'avoir coté serveur.
Sinon une requête ajax.

Pour le reste des info (ville cp etc) il faut voir du coté de l'api google si elle fournit tous cela.


@+

Recuperation latitude et longitude d'un marqueur déplaçable

par wil974 » 24 oct. 2016, 09:09

Bonjour,

encore une fois mille merci pour vos aide très précieux , a chaque demande ,j'ai une réponse.

voila ecore une petite question:

voici mon code :
<!doctype html>
<!--************************************************-->
<!--***           Crée Par Willy Solerieu        ***-->
<!--***                                          ***-->
<!--*** 			   [email protected] 		 ***-->
<!--***                                          ***-->
<!--***                          @copyright2016  ***-->
<!--************************************************-->

<html>
<head>
    <meta charset="utf-8">
    <title>CREATION POI</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script type="text/javascript" src="./jquery/google-maps-geometry-3.13.js"></script>


        <form action="test2.php" method="post">
                <div class="row">
                        <p class="input-field col-md-2">
                            <select style="display:inline" name="type">
                                  <option disabled selected>Type</option>
                                  <option>FIRE</option>
                                  <option>FAO</option>
                                  <option>DZ</option>
                                  <option>COLONNE-SECHE</option>
                                  <option>ESSENCE</option>
                                  <option>PISCINE</option>
                                  <option>GARE</option>
                                  <option>HOTEL</option>
                                  <option>EQUESTRE</option>
                                  <option>RESIDENCE</option>
                                  <option>CAMPING</option>
                                  <option>MUSEE</option>
                                  <option>POLICE</option>
                                  <option>MAIRIE</option>
                                  <option>DIVERS</option>
                                  <option>INDUSTRIE</option>
                                  <option>INTERVENTION</option>
                                  <option>CIS</option>
                            </select>
                        </p>
                        <p class="col-md-4 input-field">
                                <input id="id" type="text" name="name" required>
                                <label for="id">Libellé</label>
                        </p>
                        </div>
                        
                <div class="row">
                   
                   <p class="col-md-4 input-field">
                                <input id="add" type="text" name="adress" required>
                                <label for="add">n° et adresse</label>
                        </p>
                        
                        
                        <p class="input-field col-md-2">
                                <select style="display:inline" name="commune" required>
                                        <option disabled selected>Commune</option>
                                    	<option>MENTON</option>
                                      	<option>ROQUEBRUNE CAP-MARTIN</option>
                                        <option>CASTELLAR</option>
                                        <option>SAINT-AGNES</option>
                                        <option>GORBIO</option>
                                        <option>SOSPEL</option>
                                        <option>BREIL</option>
                                        <option>CASTILLION</option>
                                        <option>BEAUSOLEIL</option>
                                        <option>FONTAN</option>
                                        <option>SAORGE</option>
                                </select>
                                </p>
                        </div>
                        <div class="row">
                 Veuillez dèplacer le marker a l'endroit ,ou se trouve l'objet   
                        </div>    
		<style>
		
			#EmplacementDeMaCarte {
				height:300px;
				width:auto;
				max-width:950px
			}
			#positionMarker {
				height: 10%
			}
		</style>


    <div class="row">
		<div id="EmplacementDeMaCarte"></div>
		<div id="positionMarker" name="lat">Latitude <span id="positionMarkerLatitude"></span> - Longitude <span id="positionMarkerLongitude"></span></div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
		<script>
			function initialisation() {
				var optionsCarte = {
					zoom: 18,
					center: { lat: 43.7756, lng: 7.4950 },
					mapTypeId : google.maps.MapTypeId.ROADMAP,
					streetViewControl: false
				};
				var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );
				var optionsMarqueur = {
					map: maCarte,
					position: maCarte.getCenter(),
					draggable: true
				};
				var marqueur = new google.maps.Marker( optionsMarqueur );
				google.maps.event.addListener( marqueur, "position_changed", function() {
					var lat = this.getPosition().lat(),
						lng = this.getPosition().lng();
				    document.getElementById( "positionMarkerLatitude" ).innerHTML = lat;
					document.getElementById( "positionMarkerLongitude" ).innerHTML = lng;
				
				});
				
			 }
		</script>
		<script async defer  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7xUUguzeibKL5IkhMIdHaqmhUOZx3Wkk&callback=initialisation"></script>
        
	</div>
      <div class="row">
                       
                        <p class="col-md-3">
                                <input class="waves-effect waves-light btn" style="width:100%;background-color:#0a0b6e" type="submit" value="Créer le POI" />
                        </p>
                        <p class="col-md-3">
                                <input class="waves-effect waves-light btn" style="width:100%;background-color:#e76b2e" type="reset" name="Annuler" value="Reset">
                        </p>
                </div>
         
        </form>

   
</body>

</html>
cette page appel une autre : test2.php

je voudrais recuperer la latitude et longitude du marker deplacable , et l'afficher dans le echo ,puis je continurais mon code pour l'inserer dans une BDD

voici ma page test2.php
<!DOCTYPE html>
<html lang="fr">
<head>
  
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

 <center>
<?php

 $commune =$_POST['commune'];
 $adress= $_POST['adress'];
 $name = $_POST['name'];
 $type = $_POST['type'];

  
echo "<center><h2>Creation d'un nouveau POI 2/2</h2></center>";
echo "<center><h3>Voici les information saisie :</h3></center>";
echo "<center><h4>Nom du Poi : $name</h4></center>";
echo "<center><h4>Type POI : $type </h4> <h4> Adresse : $adress</h4></center>";
echo "<center><h4>Commune : $commune </h4>";
echo "<center><h4>Longitude : $lat et Latitude : $lng</h4></center>";

?>
En vous remerciant par avance .