1) У меня есть сайт, используя jQuery и плагин gMap Google Maps. Все это работает отлично, и я получаю свои маркеры, и мне очень нравится это решение. Вот как это выглядит:
<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> Теперь моя проблема:
Я добавил функцию «onmoveend», которая получит новые «маркерные» данные из внешнего файла. Все отлично работает, только маркеры не отображаются правильно, будет отображаться только LAST Item. Готов поспорить, это всего лишь небольшая вещь, но я потерялся прямо сейчас …
Вот что я делаю:
2) Я добавил этот скрипт:
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] } }); }); });
И некоторые 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" />
Если вы переместите первую карту, я loader.php вторую карту, которая «должна» удерживать новые маркеры, возвращаемые loader.php .
loader.php :
Он получает новые «близкие мне» записи из базы данных, а затем «строит» строку, аналогичную той, которая используется в примере 1).
Вот как это выглядит:
$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
Значения, возвращаемые loader.php «выглядят» точно так, как они должны выглядеть в соответствии с loader.php 1).
Я предполагаю, что моя проблема связана с $.getJSON и какой-то проблемой «кодировать / декодировать», но я всю ночь проводил, пробовал взад и вперед («normal $ .get»), разные форматы возврата в loader.php , но все НЕ преуспевает.
Сейчас это выглядит нормально, но, к сожалению, я просто установил маркер LAST на моей карте. Плагин jQuery, который «устанавливает» маркеры, можно найти здесь: http://gmap.nurtext.de/js/jquery.gmap-1.1.0.js
(Я поворачиваюсь в кругах и надеюсь на то, что вы объясните, ребята …)
Это всего лишь небольшая вещь в Loader.php:
echo "[".$markers.$MyNewPositionMarker."]"; //and removed the [] at the position when loading the new map: WRONG... markers: [data], ... RIGHT: ... markers: data, ...
(Это всего лишь копия этого решения в комментарии, чтобы удалить вопрос из списка «без ответа».)