1) J'ai un site, en utilisant jQuery et le plugin Google Maps gMap. Tout fonctionne parfaitement, et mes repères sont corrects, et j'aime vraiment cette solution. Voici comment il ressemble:jQuery, JSON, PHP et 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>
Maintenant, mon problème:
J'ai ajouté une fonction « onmoveend », qui va obtenir de nouvelles données « marqueurs » à partir d'un fichier externe. Tout fonctionne bien, juste les marqueurs ne s'affichent pas correctement, seul le dernier élément sera affiché. Je parie que c'est seulement une petite chose, mais je suis perdu en ce moment ...
Voici ce que je fais:
2) J'ajouté ce 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]
}
});
});
});
Et certains 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 vous déplacez la première carte, j'afficher une seconde carte qui « devrait » tenir les nouveaux marqueurs retournés par le loader.php.
loader.php:
Il devient les nouvelles entrées « près de moi » de la base de données, puis « construit » la chaîne similaire à celle utilisée dans l'échantillon 1).
est ici à quoi il ressemble:
$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
Les valeurs qui sont retournées par loader.php « look » exactement ce qu'ils devraient ressembler comme par échantillon 1).
Je suppose, mon problème est de faire $.getJSON et une sorte de "encoder/décoder" problème, mais j'ai passé toute la nuit, essayé d'avant en arrière ("normal $ .get"), différents formats de retour en loader.php, mais tous ne réussissant pas.
À l'heure actuelle, ça a l'air OK, mais malheureusement, je viens d'obtenir le marqueur LAST sur ma carte. Le plug-in jQuery, qui est « réglage » les marqueurs peuvent être trouvés ici: http://gmap.nurtext.de/js/jquery.gmap-1.1.0.js
(je tourne en rond et espèrent des éclaircissements par vous les gars ...)
peut le voir ici: http: //www.divessi.com/code/geo/stack_demo.php –
OK - foun d la première solution ... C'était, comme suggéré, une petite chose ... Loader.php: echo "[". $ markers. $ MyNewPositionMarker. "]"; et supprimé le [] à la position lors du chargement de la nouvelle carte: WRONG ... marqueurs: [données], ... DROITE: ... marqueurs: données, ... –
Plz répondre à votre question avec cette solution et le marquer comme accepté :) – AlfaTeK