Home > Uncategorized > Google Map Api – Ders 6 – Hareket eden işaretçiler oluşturmak

Google Map Api – Ders 6 – Hareket eden işaretçiler oluşturmak

Belki de bu apinin en çok beğendim özelliği hareket eden işaretçiler oluşturmak. Aslında burada apinin ekstradan herhangi bir özelliğini kullanmayacağız. Sadece programlama mantığımızdan yola çıkarak temel bir kaç javascript özelliği ile hareket edebilen işaretçiler oluşturacağız.

Programımızı yine fonksiyonlara ayiriyoruz. En başta işaretçimizi oluşturduk bunda problem yok.
Şimdi 4 tane metodumuz olacak.

1-) startMarker() : Isaretciyi hareket icin tetikleyecek metod
2-) stopMarker() : Isaretcinin hareketini durduracak metod
3-) moveMarker() : Isaretciyi hareket ettirecek metod
4-) setCoords() : Isaretcinin hareket edecegi koordinatları random olarak oluşturacak metod. Ben random koordinatlar olusturdum, arzu eden buraya elle degerler girip isaretcinin bir yol üzerinde hareket etmesini sağlayabilir. Projemde ben bu sekilde kullanmıstım. Elle degerleri girip aracları belli yol üzerinde hareket ettirebiliyordum.

Javascript’te timer olaylarını biraz bilmek gerekiyor. startMarker metodunda yer alacak aşağıdaki kod , speedInterval milisaniye sonra moveMarker metodunun çalıştıracağını belirtiyor.


function startMarker()
{
timerID = setTimeout("moveMarker()", speedInterval);
}

Peki movemarket metodunda ne yapiliyor? Random olarak urettigimiz koordinatlara işaretçinin yönlendirilmesi yapiliyyor:


function moveMarker()
{
coordObj = new GLatLng(coordY[coordSayac],coordX[coordSayac]);
busMarker.setLatLng(coordObj);
coordSayac++;
timerID = setTimeout("moveMarker()", speedInterval);
}

Fonksyionun ilk satirinda random degerler ile doldurdugumuz coordY ve coordX arraylarindan ilgili indexteki degerler ile bir koordinat objesi oluşturuluyor ( coordObj ). Daha sonra işaretçi buraya yönlendiriliyor ( busMarker.setLatLng ). Daha sonra index değeri bir arttırılıp, aynı metod speedInterval milisaniye sonra tekrar çağırılıyor.

Örneğin tamamı için:

http://afsungur.googlepages.com/map_ornek_8.html

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: