Google Maps API ile Dinamik İşaretçi

Merhaba,

Kısaca yapıdan bahsetmek gerekir ise; Web sitesi üzerinden araç takip arayüz projesi geliştirmeye başladım. Bir firmadan anlık olarak gps ile araçların harita üzerindeki enlem ve boylam bilgilerini aldığımız bir web servisi bulunmakta. Ajax ve XML yardımı ile Google Maps üzerinden, firmaya ait web servis'ten aldığımız enlem ve boylam bilgilerine göre harita üzerinde konumladırma yapabiliyorum. Belli saniyelerde Ajax ile refresh yapıp tekrar XML dosyasının yüklenmesini sağlayarak konum işaretinin yerini değiştirebiliyorum. Ancak her yenilemede konum ile bilikte haritada yüklendiğinden dolayı sayfada kırpma etkisi oluyor. Ben haritanın değil sadece işaretleyicinin yerinin değişmesini istiyorum. Bu tür bir uygulama deneyimi olan  veya bu konuda fikri olan tüm arkadaşların önerilerini bekliyorum

Teşekkürler. 

Merhaba,

Sorununuz çözüldü mü ? çözüldü ise lütfen nasıl
yapıldığı konusunda bilgi verirmisiniz, aynı sorunu yaşayan kişiler
faydalanabilir.

Teşekkürler.

 

Evet sorunu çözdüm,

Anlatım kısmı biraz karışık gelebilir en baştan anlatmak yerine sonun ilgili kısmını yazacağım sorun yaşayanlar olur ise bu başlık altından devam edebilirim. PHP ile programladığım için onun üzerinden örnek vereceğim.

İlk önce yapıdan bahsedeyim. Araçların idsine göre aracın enlem ve boylam km, kontak v.s. bilgilerini veren bir web servis ve buradan bilgileri çekerek xml çıktısı veren soap.php isimli bir dosyamız bulunmakta. Aldığınız araçtakip (webservis) hizmetine göre değişiklik gösterdiğinden webservisten data çekimi farklılık gösterebilir bu kısmının nasıl yapıldığını bilindiğini düşünüyorum. maps api için kısaca soap.php'nin bu şekilde bir xml oluşturması gerekmektedir.

 <markers>
     <marker lat="43.65654" lng="-79.90138" label="Marker One">
     </marker> </markers>

 yukarıda etiket, enlem ve boylam bilgisi gelmektedir bunları çoğaltabilirsiniz. soap.php'ye get yönetimi ile bağlanarak araç idsine göre bunları çekmeniz mümkün soap.php'ye javascript ile bağlanabilirsiniz.

   <script type="text/javascript">

function load() {
	var map = new google.maps.Map(document.getElementById("map"), {
	center: new google.maps.LatLng(41.004257, 29.013176),
	zoom: 11,
	mapTypeId: 'roadmap'
	});
	var infoWindow = new google.maps.InfoWindow;

';

$araclarsor = $veritabani->Sec('araclar','',"",'','');

while ($araclaryaz = mysql_fetch_array($araclarsor)){

echo '

setInterval(function(){ 

var random = "?=" + (new Date()).getTime(); 

      downloadUrl("soap.php?id='.$araclaryaz['id'].'", function(data) {

        var xml = data.responseXML;

        var markers = xml.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {

          var name = markers[i].getAttribute("name");

          var address = markers[i].getAttribute("address");

          var type = markers[i].getAttribute("type");

 var vehicleign = markers[i].getAttribute("vehicleign");

 var geocoun = markers[i].getAttribute("geocoun");

 var lasconnect = markers[i].getAttribute("lasconnect");

 var postalc = markers[i].getAttribute("postalc");

 var odometer = markers[i].getAttribute("odometer");

 var marka = markers[i].getAttribute("marka");

 var model = markers[i].getAttribute("model");

 var direction = markers[i].getAttribute("direction");

          var point = new google.maps.LatLng(

              parseFloat(markers[i].getAttribute("lat")),

              parseFloat(markers[i].getAttribute("lng")));

          var html = "<strong>" + name + "</strong> <br />" + address + " " + postalc + " " + geocoun + "<br /> Kontak: " + vehicleign + "<br /> Son Baglanti: " + lasconnect + "<br /> Sayac: " + odometer + "<br /> Marka/Model: " + marka + "/" + model ;

          var icon = customIcons[type] || {};

          var marker = new google.maps.Marker({

            map: map,

            position: point,

            icon: icon.icon,

            shadow: icon.shadow

          });

          bindInfoWindow(marker, map, infoWindow, html);

 setInterval(function(){

marker.setMap(null);

 }, 15000);

        }

      })}, 15045);

';

}

 

 echo '

    }

    function bindInfoWindow(marker, map, infoWindow, html) {

      google.maps.event.addListener(marker, \'click\', function() {

        infoWindow.setContent(html);

        infoWindow.open(map, marker);

      });

    }

    function downloadUrl(url, callback) {

      var request = window.ActiveXObject ?

          new ActiveXObject(\'Microsoft.XMLHTTP\') :

          new XMLHttpRequest;

      request.onreadystatechange = function() {

        if (request.readyState == 4) {

          request.onreadystatechange = doNothing;

          callback(request, request.status);

        }

      };

      request.open(\'GET\', url, true);

      request.send(null);

    }

    function doNothing() {}

    //]]>

  </script> 

 

yukarada php ile yazdığım komutlar bununmaktadır bunu haritanın bulunduğu sayfada header kısmına yazmamız gerekmektedir. veritabanından araç idlerini döngü ile çekerek tek tek her araç için javascript kodu üretmektedir.  

setInterval(function(){ 

var random = "?=" + (new Date()).getTime(); 

......................................

  }, 15000);

        }

      })}, 15045);

 

komutları ile 15 sn boyunca ilgili idli aracı haritada konumunda gösterip saniyenin binde 45i kadar sürede gizlemekte, bu süre sonunda yukarıdaki javascript komutu tekrar çalışmaktadır. soap.php dosyasını tekrar çalıştırarak yeni bilgilere göre yine göstermektedir. 15 sn yede bir bu değişmektedir. her araç için yukarıda komutlar tekrar yazıldığından dolayı her araç için bu işlem tekrarlanmaktadır. Kodu incelemenizi öneririm amaç php tarafında sadece javascript kodlarını üretmek oluşan javascript kodunun ise belli aralıklarıda her araç için soap.php yi çalıştırmasını sağlamaktır

 

Takıldığım kısım burasıydı aslında yaptığım olay bir timeout süresi oluşturup javasctriptteki fonksiyonun tekrar tekrar çalışmasını sağlamak. Uygulama 20 araçta sorunsuz çalışmaktadır daha fazlasında da çalışır ancak javascript kodları artıcağından bin araçta nasıl bir tepki verir bilmiyorum olmazsa javascript için ayrı bir dosyada komut yazılır veya revize edilebilir

Kısaca olay web servisinden SOAP yönetimi ile bilgi çekmek bunun desteğini hizmet aldığınız yer verecekti,. Google Maps apiye xml ile bunları entegre etmek ve bir time out süresi koymaktır Google Maps api ve xml için kendi sitesinde bir çok destek bulunmaktadır. Size kalan kısım PHP veya ASP de veritabanında gerçekleştireceğiniz olaylardır. Kodun sürekli yenilenmesi için üsteki verdiğim örnekten yaralanabilirsiniz.