google georreferenciación geolocalizacion example php jquery ajax json google-maps

georreferenciación - google maps php



jQuery, JSON, PHP y gMap (1)

Es solo una cosa pequeña en Loader.php:

echo "[".$markers.$MyNewPositionMarker."]"; //and removed the [] at the position when loading the new map: WRONG... markers: [data], ... RIGHT: ... markers: data, ...

(Esto es solo un copiar y pegar de la solución en el comentario para eliminar la pregunta de la lista "sin respuesta").

1) Tengo un sitio, usando jQuery y el complemento gMap Google Maps. Todo esto funciona perfectamente, y obtengo mis marcadores correctamente, y realmente me gusta esta solución. Así es como esto luce:

<script type="text/javascript" src="http://www.google.com/jsapi?key=MyGmapKey"></script> <script type="text/javascript"> google.load("jquery", ''1.3''); google.load("maps"); </script> <script type="text/javascript" src="/code/js/jquery.gmap-1.1.0-min.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("#map1").gMap( { latitude: 48.7, longitude: 13.4667, zoom: 9, markers: [{latitude: 48.461117, longitude: 13.418795, html: "MY Info Box 1"}, {latitude: 48.531602, longitude: 12.942087, html: "Another Info Box"}, {latitude: 48.198242, longitude: 13.536017, html: "Guess what? This is INFO Text!"}, {latitude: 48.325327094, longitude: 14.0712547302, html: "INFO"}, {latitude: 48.7, longitude: 13.4667,icon: { image: "images/My_Position.png", iconsize: [20, 34], iconanchor: [5, 34], infowindowanchor: [5, 2], infoshadowanchor: [14, 25] }, html: "Your current position: 48.7 | 13.4667, Germany"}], controls: ["GSmallZoomControl3D", "GMapTypeControl"], scrollwheel: true, maptype: G_HYBRID_MAP, html_prepend: ''<div class="gmap_marker">'', html_append: ''</div>'', icon: { image: "images/gmap_pin.png", shadow: false, iconsize: [19, 21], shadowsize: false, iconanchor: [4, 19], infowindowanchor: [8, 2] } }); //Trailing "}" missing here... </script> <style type="text/css" media="screen"> #map1{ float:left; width:500px; height:500px; overflow:hidden; margin: 20px; } .gmap_marker { font-family:Geneva, Arial, Helvetica, sans-serif; color:#0000CC; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="map1"></div> </body> </html>

Ahora mi problema:

Agregué una función "onmoveend", que obtendrá nuevos datos de "marcador" de un archivo externo. Todo funciona muy bien, solo los marcadores no se muestran correctamente, solo se mostrará el ÚLTIMO elemento. Apuesto que es solo una cosa pequeña, pero estoy perdido ahora mismo ...

Esto es lo que hago:

2) Agregué este script:

if (GBrowserIsCompatible()) { var map = $gmap; var center = new GLatLng(<?=$_GET[''lat'']?>,<?=$_GET[''lon'']?>); GEvent.addListener(map, "moveend", function() { map.clearOverlays(); var center = map.getCenter(); var marker = new GMarker(center, {draggable: true}); map.addOverlay(marker); var lat = center.lat(); var lng = center.lng(); document.getElementById("lat").value = lat; document.getElementById("lng").value = lng; GEvent.addListener(marker, "dragend", function() { var point=marker.getPoint(); map.panTo(point); var lat = point.lat(); var lng = point.lng(); document.getElementById("lat").value = lat; document.getElementById("lng").value = lng; }); $.getJSON(''loader.php'', { lat: lat, lng: lng, rad: <?=$rad?>} , function(data) { $("#map").gMap( { latitude: lat, longitude: lng, zoom: 9, markers: [data], controls: ["GSmallZoomControl3D", "GMapTypeControl"], //"GScaleControl", scrollwheel: true, maptype: G_HYBRID_MAP, html_prepend: ''<div class="gmap_marker">'', html_append: ''</div>'', icon: { image: "images/gmap_pin.png", shadow: false, iconsize: [19, 21], shadowsize: false, iconanchor: [4, 19], infowindowanchor: [8, 2] } }); }); });

Y algo de HTML:

<div id="map" style="float:left; width:500px; height:500px; overflow:hidden; margin: 20px;"></div> Current coordinates: <br> <b>Latitude:</b> <input type="text" size="34" name="latitude" value="" id="lat" /><br> <b>Longitude:</b><input type="text" size="34" name="longitude" value="" id="lng" />

Si mueve el primer mapa, loader.php un segundo mapa que "debería" contener los nuevos marcadores devueltos por loader.php .

loader.php :

Obtiene las nuevas entradas "cercanas a mí" de la base de datos y luego "crea" la cadena similar a la utilizada en la muestra 1).

Esto es lo que parece:

$MyNewPositionMarker.=''{latitude: ''. $_GET[''lat''].'', longitude: ''. $_GET[''lng''].'', html: "''.$html.''"},'' ; //Getting database results while while($row = mysql_fetch_assoc($result)) { $markers.=''{latitude: ''.$row[''odin_facility_lat''].'', longitude: ''.$row[''odin_facility_lon''].'', html: "''.$html.''"},'' ; } echo $markers.$MyNewPositionMarker

Los valores que devuelve loader.php "lucen" exactamente como deberían ser, como muestra 1).

Supongo que mi problema es hacer con $.getJSON y algún tipo de problema de "codificación / decodificación", pero pasé toda la noche, intenté de ida y vuelta ("normal $ .get"), diferentes formatos de retorno en loader.php , pero todo NO tiene éxito

En este momento, se ve bien, pero desafortunadamente acabo de obtener el último marcador en mi mapa. El complemento jQuery, que está "configurando" los marcadores, se puede encontrar aquí: http://gmap.nurtext.de/js/jquery.gmap-1.1.0.js

(Estoy dando vueltas en círculos y espero que me aclaren un poco ...)