1) Mam witrynę, używając jQuery i wtyczki Google Maps gMap. Wszystko działa idealnie, a moje markery są ustawione prawidłowo i bardzo podoba mi się to rozwiązanie. Tak to wygląda:jQuery, JSON, PHP i 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>
Teraz mój problem:
dodałem funkcję „onmoveend”, że dostanie nowe „marker” dane z pliku zewnętrznego. Wszystko działa świetnie, tylko znaczniki nie wyświetlają się poprawnie, tylko OSTATNI produkt zostanie wyświetlony. Założę się, że to tylko mała rzecz, ale jestem zgubiony teraz ...
Oto, co zrobić:
2) dodałem ten skrypt:
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]
}
});
});
});
a niektóre 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" />
Jeśli przesuniesz pierwszą mapę, wyświetlać drugą mapę, która „powinna” przytrzymać nowych markerów zwrócone przez loader.php.
loader.php:
Robi się nowe „Close to Me” wpisy z bazy danych, a następnie „buduje” ciąg podobny do stosowanego w próbce 1).
Oto jak to wygląda:
$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
Wartości, które są zwracane przez loader.php „wygląd”, co dokładnie powinno wyglądać jak na przykład 1).
Zgaduję, że mój problem związany jest z $.getJSON i pewnego rodzaju problemem "kodowania/dekodowania", ale spędziłem całą noc, próbowałem tam iz powrotem ("normal $ .get"), różne formaty zwrotów w loader.php, ale wszystko NIE powiodło się.
Teraz wygląda na OK, ale niestety po prostu ustawiono znacznik LAST na mojej mapie. JQuery Plugin, który jest „ustawienie” markery można znaleźć tutaj: http://gmap.nurtext.de/js/jquery.gmap-1.1.0.js
(ja obracając się w kółko i mają nadzieję na jakiegoś wyjaśnienia przez Was ...)
można go zobaczyć tutaj: http: //www.divessi.com/code/geo/stack_demo.php –
OK - rzeczownik d pierwsze rozwiązanie ... Było, jak zasugerowano tylko małą rzeczą ... Loader.php: echo "[". $ markers. $ MyNewPositionMarker. "]"; i usunięto [] w miejscu podczas ładowania nowej mapy: WRONG ... znaczniki: [dane], ... PRAWO: ... znaczniki: dane, ... –
Plz odpowiedz na to pytanie z tym rozwiązaniem i oznacz jako zaakceptowane :) – AlfaTeK