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,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”功能,可以从外部文件获取新的“标记”数据。所有的作品都很棒,只是标记不正确,只有最后的项目才会显示。我敢打赌这只是一件小事,但现在我失去了…
这是我做的:
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,markers: [data],//"GScaleControl",icon: { image: "images/gmap_pin.png",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:
从数据库中获取新的“靠近我”条目,然后“构建”类似于示例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'].',' ; } echo $markers.$MyNewPositionMarker
loader.PHP返回的值根据示例1)“看起来”它们应该是什么样子。
我想,我的问题是与$ .getJSON和某种“编码/解码”问题有关,但是我花了整整一个晚上来回尝试(“normal $ .get”),loader.PHP中的不同返回格式,但都不成功。
现在,看起来不错,但不幸的是我只是在我的地图上找到了LAST标记。 jQuery插件,即“设置”标记可以在这里找到:http://gmap.nurtext.de/js/jquery.gmap-1.1.0.js
(我转过身来,希望你们有一些澄清…)