jQuery,JSON,PHP和gMap
1)我有一个网站,使用jQuery和gMap谷歌地图插件。 这一切都很完美,我的标记设置正确,我真的很喜欢这个解决方案。 这是它的样子:
google.load("jquery", '1.3'); google.load("maps"); $(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: '', html_append: '', icon: { image: "images/gmap_pin.png", shadow: false, iconsize: [19, 21], shadowsize: false, iconanchor: [4, 19], infowindowanchor: [8, 2] } }); //Trailing "}" missing here... #map1{ float:left; width:500px; height:500px; overflow:hidden; margin: 20px; } .gmap_marker { font-family:Geneva, Arial, Helvetica, sans-serif; color:#0000CC; }
现在我的问题:
我添加了一个“onmoveend”函数,它将从外部文件中获取新的“标记”数据。 一切都很好,只是标记显示不正确,只显示最后一项。 我敢打赌这只是一件小事,但我现在迷路了……
这是我做的:
2)我添加了这个脚本:
if (GBrowserIsCompatible()) { var map = $gmap; var center = new GLatLng(,); 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: } , function(data) { $("#map").gMap( { latitude: lat, longitude: lng, zoom: 9, markers: [data], controls: ["GSmallZoomControl3D", "GMapTypeControl"], //"GScaleControl", scrollwheel: true, maptype: G_HYBRID_MAP, html_prepend: '', html_append: '', icon: { image: "images/gmap_pin.png", shadow: false, iconsize: [19, 21], shadowsize: false, iconanchor: [4, 19], infowindowanchor: [8, 2] } }); }); });
还有一些HTML:
Current coordinates:
Latitude:
Longitude:
如果移动第一个地图,我会显示第二个地图,“应该”保存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
返回的值“看起来”完全按照样本1的样子显示。
我想,我的问题是与$.getJSON
和某种“编码/解码”问题有关,但我花了一整夜,来回尝试(“普通$ .get”),在loader.php
不同的返回格式,但都没有成功。
现在,它看起来还不错,但遗憾的是我只是在我的地图上设置了最后一个标记。 可以在这里找到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, ...
(这只是评论中解决方案的复制粘贴,用于从“未答复”列表中删除问题。)