jQuery，JSON，PHP和gMap

1）我有一個網站，使用jQuery和谷歌地圖插件gMap。這一切都很完美，我的標記設置正確，我非常喜歡這個解決方案。這是它的樣子：jQuery，JSON，PHP和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>

現在我的問題：

我加了一個「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, 
      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：

它從數據庫中獲取新的「靠近我」項，然後在「建立」類似於樣本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不同的返回格式，但都沒有成功。

現在，它看起來不錯，但不幸的是我只是在我的地圖上設置了LAST標記。的jQuery插件，那就是「設置」標記可以在這裏找到：http://gmap.nurtext.de/js/jquery.gmap-1.1.0.js

（我轉圈，並希望澄清由你們...）

來源

2010-08-13 Christian K.

你可以在這裏看到：HTTP： //www.divessi.com/code/geo/stack_demo.php – 2010-08-13 08:28:39

OK - foun d第一個解決方案... 這是，因爲建議只有一件小事... ... Loader.php：echo「[」。$ markers。$ MyNewPositionMarker。「]」; 並在加載新地圖時刪除了位置上的[]： WRONG ...標記：[data]，... RIGHT：...標記：data，... – 2010-08-13 09:26:21

+22

Plz回答你的問題與該解決方案，並將其標記爲接受:) – AlfaTeK 2011-03-14 18:42:50

這只是一個小在Loader.php件事：

echo "[".$markers.$MyNewPositionMarker."]"; 
//and removed the [] at the position when loading the new map: WRONG... markers: [data], ... RIGHT: ... markers: data, ...

（這只是在註釋解決從「懸而未決」列表中刪除的問題的複製粘貼）。

來源

2011-06-01 06:44:03

其已在評論中回答 – footy 2011-06-01 10:32:47

jQuery，JSON，PHP和gMap

回答

相關問題