2010-08-13 16 views
17

1) मेरे पास jQuery और gMap Google मानचित्र प्लगइन का उपयोग करके एक साइट है। यह सब पूरी तरह से काम करता है, और मुझे अपने मार्कर सही सेट मिलते हैं, और मुझे वास्तव में यह समाधान पसंद है। यह है कि यह कैसे की तरह लग रहा है: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" समारोह, कि एक बाहरी फ़ाइल से नया "मार्कर" डेटा मिलेगा गयी। सभी महान काम करते हैं, सिर्फ मार्कर सही प्रदर्शन नहीं कर रहे हैं, केवल अंतिम आइटम प्रदर्शित किया जाएगा। मैं इसे केवल एक छोटा सा बात है यकीन है, लेकिन मैं अभी खो रहा हूँ ...

यहाँ मैं क्या करना है:

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:

2) मैं इस स्क्रिप्ट कहा:

<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) के रूप में दिखना चाहिए:

यहाँ यह कैसा दिखता है।

मुझे लगता है, मेरी समस्या, ("सामान्य $ .Get"), loader.php में विभिन्न वापसी प्रारूपों $.getJSON और "एनकोड/डीकोड" समस्या किसी तरह का साथ क्या करना है, लेकिन मैं सभी रात बिताई, आगे पीछे करने की कोशिश की लेकिन सभी सफल नहीं हैं।

अभी, यह ठीक दिखता है, लेकिन दुर्भाग्य से मुझे बस मेरे मानचित्र पर अंतिम मार्कर सेट मिलता है। jQuery प्लगइन, कि "सेटिंग" है मार्करों यहां पाया जा सकता: http://gmap.nurtext.de/js/jquery.gmap-1.1.0.js

(मैं हलकों में बदल रहा हूँ और तुम लोगों से कुछ स्पष्टीकरण के लिए उम्मीद कर रहे हैं ...)

+0

आप इसे यहाँ देख सकते हैं: http: //www.divessi.com/code/geo/stack_demo.php –

+0

ठीक - foun डी पहला समाधान ... यह केवल एक छोटी सी चीज के सुझाव के रूप में था ... Loader.php: echo "["। $ मार्कर। $ MyNewPositionMarker। "]"; और नए मानचित्र को लोड करते समय स्थिति पर [] को हटा दिया: WRONG ... मार्कर: [डेटा], ... दाएं: ... मार्कर: डेटा, ... –

+22

Plz उस समाधान के साथ अपने प्रश्न का उत्तर दें और इसे स्वीकार्य के रूप में चिह्नित करें :) – AlfaTeK

उत्तर

2

यह केवल एक छोटा सा है Loader.php में बात:

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

(यह टिप्पणी में समाधान "अनुत्तरित" सूची से सवाल को दूर करने का सिर्फ एक कॉपी-पेस्ट है।)

+1

इसकी टिप्पणियों में पहले ही उत्तर दिया गया है – footy