1) Tengo un sitio, usando jQuery y el gMap complemento de Google Maps. Todo esto funciona perfectamente, y obtengo mis marcadores correctamente, y realmente me gusta esta solución. Esta es la forma en que parece:jQuery, JSON, PHP y gMap
<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:
he añadido una función "onmoveend", que hará que los nuevos datos "marcador" de un archivo externo. Todo funciona muy bien, solo los marcadores no se muestran correctamente, solo se mostrará el ÚLTIMO elemento. Apostaría que es sólo una pequeña cosa, pero estoy perdido en este momento ...
Aquí es lo que hago:
2) he añadido 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 se mueve el primer mapa, que muestran un segundo mapa que "debe" mantener los nuevos marcadores devueltos por el loader.php.
loader.php:
Se está haciendo el nuevo "cercanas a mí" entradas de la base de datos y luego "construye" 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 devueltos por loader.php "ven" exactamente lo que debe ser similar según muestra 1).
Supongo que mi problema es hacer con $.getJSON y algún tipo de problema de "codificar/decodificar", pero pasé toda la noche, intenté de ida y vuelta ("normal $ .get"), diferentes formatos de devolución 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 plugin de jQuery, que se "ajuste" los marcadores se pueden encontrar aquí: http://gmap.nurtext.de/js/jquery.gmap-1.1.0.js
(Me estoy convirtiendo en círculos y están esperando una aclaración por ustedes ...)
se puede ver aquí: http: //www.divessi.com/code/geo/stack_demo.php –
OK - foun d la primera solución ... Fue, como se sugiere, una cosa pequeña ... Loader.php: echo "[". $ marcadores. $ MyNewPositionMarker. "]"; y eliminó el [] en la posición cuando se carga el nuevo mapa: ERRÓNEO ... marcadores: [datos], ... DERECHO: ... marcadores: datos, ... –
Plz responda su pregunta con esa solución y márquela como aceptada :) – AlfaTeK