Discussion :

[gpsevasion]

Bonjour
Ce sur coup j ai besoin de votre aide …

Ci joint url de test : http://www.gps-evasion.com/_rep1/developpez.php

Principe et explication :

Le visiteur rentre une adresse dans le champs puis il clic sur « localisation (adresse) », l’appli positionne sur une carte l’adresse

Je souhaite faire évoluer ce script c’est a dire suite à l’action «localisation (adresse)» trouver la longitude et latitude de la recherche puis interroger ma base de donner mysql et rechercher les adresses voisines en utilisant comme critères de recherche la longitude et latitude pour finir positionner toutes les adresses sur la carte y compris la recherche initiale.

Je ne connais pas grand chose à la programmation en javascript, pouvez vous m’aide en me proposant des partie de code à ajouter ?

Merci pour votre aide ci joint ci dessous le code de ma page :

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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
 
<?php  
 
if ((isset($HTTP_POST_VARS["MM_insert"])) && ($HTTP_POST_VARS["MM_insert"] == "form1") ) { // enregistrement des données
 
 
} // fin de l'enregistrement des données
 
 
?>
 
<script type='text/javascript'>
//<![CDATA[
var geocoder = null;
function createMarker(point,html,image) {
	// "tiny" marker icon
		var icon = new GIcon();
		icon.image = "http://www.gps-evasion.com/images_icones/" + image + ".bmp";
		icon.shadow = "http://www.gps-evasion.com/googlemap/marker_cw_shadow.png";
    	icon.iconSize = new GSize(22, 22);
		icon.shadowSize = new GSize(22, 22);
		icon.iconAnchor = new GPoint(6, 20);
		icon.infoWindowAnchor = new GPoint(5, 1);
      var marker = new GMarker(point, {icon:icon ,draggable: true});
      GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
      });
	  GEvent.addListener(marker, 'dragstart', function() {
	  MaCarte.closeInfoWindow();
      });
	  GEvent.addListener(marker, 'dragend', function(point) {
	  AfficheGPS(marker);
	  });
      return marker;
    }
 
 
function AfficheGPS(marker){
	var center = marker.getPoint();
	var gpscenter = center.toString();
	var TableauPositionMaxiCarte = gpscenter.split(',');
	var LatitudeCarteClick='';
	var LongitudeCarteClick='';
	var LatitudeCarteClick = TableauPositionMaxiCarte[0].replace('(', '');
	var LongitudeCarteClick = TableauPositionMaxiCarte[1].replace(')', '');
	var lon_ad_init = LongitudeCarteClick;
	var la_ad_init = LatitudeCarteClick;
 
	document.getElementById('message').innerHTML ='Long : <input name="lon_ad" type="text" class="Boite" size=20 value="'+LongitudeCarteClick+'">        lat : <input name="la_ad" type="text" class="Boite" size=20 value="'+LatitudeCarteClick+'">';
	window.setTimeout(function(){MaCarte.panTo(new GLatLng(LatitudeCarteClick, LongitudeCarteClick));}, 1000);
}
function AfficherAdresse(addresse,lon_ad,la_ad,com_ad) {
	if  (geocoder) {
		geocoder.getLatLng(
			addresse,
			function(point) {
				if (!point) {
					alert('Impossible de geolocaliser cette adresse'+addresse+com_ad+cp);
				} else {
					MaCarte.addControl(new GMapTypeControl());
					MaCarte.addControl(new GOverviewMapControl());
					MaCarte.addControl(new GLargeMapControl());
					var marker = new GMarker(point, {draggable: true});
					GEvent.addListener(marker, 'dragstart', function() {
						MaCarte.closeInfoWindow();
					});
					GEvent.addListener(marker, 'dragend', function(point) {
						AfficheGPS(marker);
					});
					MaCarte.addOverlay(marker);
					AfficheGPS(marker);
					MaCarte.setCenter(point, 15);
				}
			}
		);
	}
}
 
 
function load() {
		MaCarte = new GMap2(document.getElementById('EmplacementDeMacarte'));
		MaCarte.addControl(new GLargeMapControl());
		MaCarte.addControl(new GMapTypeControl());
	    MaCarte.setCenter(new GLatLng( 48.881986, 2.420829),7 , G_NORMAL_MAP);
	    var point = new GLatLng(48.881986,2.420829); 
        var marker = createMarker(point,'votre choix', 'votre choix'); 
        MaCarte.addOverlay(marker); 
		AfficheGPS(marker);
		geocoder = new GClientGeocoder();
}
 
 
//]]>
</script>
<html>
<head>
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=QIAAAAD_snjZhIrbGNNRZrIdrTARSOQON08a6Pxfkjf9mWq3Ulci15exQMYENK9gNDBKAYZu7kSAgpmLsSGw" type="text/javascript"></script>
<meta http-equiv="Content-Language" content="fr,ca">
<link type="text/css" rel="stylesheet" href="../style.css">
</head>
<body onLoad="load() " onUnload="GUnload()" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (gpsevasion_v3.psd) -->
<table width="802" height="442" border="0" align="center" cellpadding="0" cellspacing="0" id="Tableau_01">
  <tr> 
    <td width="823" height="442" align="center" valign="top"> 
      <div align="center"> 
        <form method="post" name="creation_poi" id="creation_poi" action="developpez.php" >
          <table width="100%" border="0">
            <tr> 
			  <td width="43%" align="center" valign="top"><div id="EmplacementDeMacarte" style="width: 350px; height: 360px"></div></td>
			  <td width="57%" height="362" align="center" valign="top"> 
                <table width="100%" align="center">
                  <tr valign="baseline"> 
                    <td height="24" colspan="3" align="right" nowrap class="Tableau_corps"> 
                      <div align="right"> 
                        <table width="102%" border="1" cellspacing="0" bordercolor="#FF0000" class="Tableau_corps">
                          <tr> 
                            <td colspan="4"><div align="center" id="message"></div></td>
                          </tr>
                        </table>
                      </div></td>
                  </tr>
                  <tr> 
                    <td colspan="3" class="Tableau_titre"><div align="center">saisir 
                        votre adresse et clic sur &quot;localisation&quot;</div></td>
                  </tr>
                  <tr valign="baseline"> 
                    <td width="22%" align="right" nowrap class="Tableau_corps">&nbsp;</td>
                    <td width="55%" class="Tableau_corps"><input name="ad_ad" type="text" class="Boite" value="<? echo $_SESSION['ad_ad'] ?>" size="60"></td>
                    <td width="23%" align="center" valign="middle" class="Tableau_corps"> 
                      <input name="position_ad" type="button" class="bouton" value="Localisation (adresse)"  onclick="AfficherAdresse(document.creation_poi.ad_ad.value,document.creation_poi.lon_ad.value,document.creation_poi.la_ad.value)" > 
                  </tr>
                  <tr valign="baseline"> 
                    <td height="22" align="right" nowrap class="Tableau_corps">&nbsp;</td>
                    <td colspan="2" class="Tableau_corps">&nbsp;</td>
                  </tr>
                </table>
                <p align="left">Expos&eacute; de mon pb :</p>
                <p align="left">je souhaite localiser une adresse, mais aussi 
                  interoger ma base de donn&eacute;es MSQL pour recherche les 
                  adresses alentour en utilisant la longitude et latitude comme 
                  critere de recherche.</p>
                <p align="left">&nbsp;</p>
                <p align="left">
                  <input name="enregistrer" type="submit" class="bouton" value="enregister dans la base (adresse)"  >
                </p></td>
            </tr>
          </table>
          <p></p>
          <p> 
            <input type="hidden" name="MM_insert" value="form1">
            <input type="hidden" name="m" value="1">
          </p>
        </form>
 
      </div></td>
  </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

[SpaceFrog]

fais une recherche avec 'tutoriel ajax' sur le forum...

A noter que l'on ne peut pas interroger une base de donnée MySQL avec javascript, mais on peut envoyer une requete ajax vers un fichier php qui lui se chargera de la requete et retournera le resultat sous forme de string