jQuery, JSON, PHP ve GMAP

0 Cevap php

1) Ben jQuery ve gMap Google Maps eklentisi kullanarak, bir site var. Bu, tüm mükemmel çalışır ve benim belirteçleri doğru ayarlamak, ve ben gerçekten bu çözüm gibi olsun. Bu gibi görünüyor nasıl:

    <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>

Şimdi benim sorunum:

Ben harici bir dosyadan yeni "işaretleyici" veri alacak bir "onmoveend" fonksiyonu eklendi. Bütün büyük işler, sadece belirteçleri doğru değil görüntüleme, sadece SON Öğe görüntülenir. Ben sadece küçük bir şey, ama şu anda kaybettim bahse girerim ...

İşte ne var:

2) Ben bu senaryoyu ekledi:

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]
            }
        });
    });
});

Ve bazı 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" />

Eğer ilk haritayı taşırsanız, ben loader.php tarafından döndürülen yeni belirteçler tutmak "gerektiğini" ikinci haritasını görüntüler.

loader.php:

Bu veritabanından yeni "bana yakın" girdileri almak ve daha sonra) numune 1'de kullanılan benzer dize "oluşturur" oluyor.

İşte buna benziyor ne:

 $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

Tarafından döndürülen değerler loader.php) onlar Numune başına 1 gibi görünmelidir tam olarak ne "bak".

Benim sorunum $.getJSON ve "kodlama / kod çözme" sorunu çeşit ile yapmak için, sanırım, ama ben farklı dönüş biçimleri, ("normal $. Olsun") ileri ve geri çalıştı, bütün gece geçirdi loader.php, ancak tüm başarılı değil.

Şu anda, Tamam görünüyor, ama ne yazık ki ben sadece benim harita üzerinde SON işaretleyici set olsun. JQuery, bu belirteçler burada bulabilirsiniz "ayar" dır: http://gmap.nurtext.de/js/jquery.gmap-1.1.0.js

(Ben ... çevrelerinde dönüm yaşıyorum ve çocuklar tarafından bazı açıklama için umut)

0 Cevap

etiketler