www.gmapsapi.com

Kompleksowy kurs podstaw API, po którym mapowianie nie będzie miało przed Tobą żadnych tajemnic!

Setki przykładów, kursów i poradników z kodem gotowym do skopiowania i korzystania.

Największa strona o Google Maps API w Polsce, największe źródło informacji w języku polskim.

Zegar cyfrowy w Google Maps

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

W poprzedniej części pokazałem, jak zrobić w Google Maps API zegar analogowy za pomocą polilinii. W tej części kursu zrobimy to samo, tylko że zegar będzie wyświetlał cyfry, przypominające wyświetlacz zegara cyfrowego.

Filozofia działania

Zegar będzie reprezentowany przez obiekt klasy Zegar. Przy jego tworzeniu zdefiniujemy kilka właściwości, takich jak położenie w pikselach względem lewego górnego rogu, kolor, rozmiary kreski itp.

Każdy zegar ma dodatkowo 6 własności: c1,c2,c3,c4,c5 i c6. Każda z nich jest obiektem klasy Cyfra.

Każdy obiekt klasy Cyfra reprezentuje jedną cyfrę (2 dla godzin, 2 dla minut i 2 dla sekund). Po stworzeniu obiektu cyfry, wywołana zostanie funkcja która rysuje 7 kresek, reprezentujących poszczególną cyfrę o podanych wymiarach:

Kreski zostały ponumerowane, do tej numeracji wrócę za chwilę.

Po narysowaniu każdej z siedmiu polilinii dla danej cyfry, wszystkie mają zostać ukryte (metoda hide())

Kluczowa jest funkcja odświeżania. Najpierw za pomocą obiektu Date() wyznaczymy czas. Mając daną godzinę/minutę/sekundę można łatwo wyznaczyć z pomocą dzielenia modulo wartość jedności, a za pomocą Math.floor() wartość dziesiątek. Taką liczbę z przedziału 0-9 trzeba przedstawić za pomocą odpowiedniego ukrywania / pokazywania kresek. Dla przykładu, liczba 8 nie ma żadnej ukrytej kreski, liczba 9 ma ukrytą "czwórkę", z kolei liczba 1 jest reprezentowana jedynie przez kreski numer 2 i 5, reszta jest ukryta. Należy więc stworzyć tablicę, zawierającą elementy typu string z numerami kresek, które mają być ukryte dla poszczególnej liczby.

Po odpowiednim ukryciu / pokazaniu kresek, za pomocą setTimeout() powtarzamy funkcję odświeżającą po sekundzie.

Deklaracja niezbędnych parametrów

Poniższa tablica zawiera informacje o kreskach, które mają być ukryte przy wyświetlaniu cyfry równej indeksowi tablicy:

var cyfry=[];
cyfry[0] = '3';
cyfry[1] = '01346';
cyfry[2] = '15';
cyfry[3] = '14';
cyfry[4] = '046';
cyfry[5] = '24';
cyfry[6] = '2';
cyfry[7] = '1346';
cyfry[8] = '';
cyfry[9] = '4';

Z kolei tablica poniżej określa położenie kresek w układzie odniesienia jednej cyfry. Ta tablica jest jednocześnie własnością obiektu Cyfra, stąd obecne są tam słówka kluczowe this:

var kreska = [];
kreska[0] = [[this.grubosc,0],[this.dlugosc-this.grubosc,0]];
kreska[1] = [[0,this.grubosc],[0,this.dlugosc-this.grubosc]];
kreska[2] = [[this.dlugosc,this.grubosc],[this.dlugosc,this.dlugosc-this.grubosc]];
kreska[3] = [[this.grubosc,this.dlugosc],[this.dlugosc-this.grubosc,this.dlugosc]];
kreska[4] = [[0,this.dlugosc+this.grubosc],[0,2*this.dlugosc-this.grubosc]];
kreska[5] = [[this.dlugosc,this.dlugosc+this.grubosc],[this.dlugosc,2*this.dlugosc-this.grubosc]];
kreska[6] = [[this.grubosc,2*this.dlugosc],[this.dlugosc-this.grubosc,2*this.dlugosc]];

Każdy element tej tablicy reprezentuje jeden odcinek, i jest tablicą składającą się z dwóch elementów - danych o punkcie początkowym i o punkcie końcowym. Każdy z tych punktów znowu jest tablicą, o współrzędnych x i y względem górnego, lewego rogu cyfry.

Stworzenie zegara

Zegar to obiekt klasy Zegar:

function Zegar(x,y,kolor,dlugosc,grubosc,alfa,odstep,odstep2)
{
	this.x = x || 10;
	this.y = y || 10;
	this.kolor = kolor || '#00ff00';
	this.dlugosc = dlugosc || 50;
	this.alfa = alfa || 0.8;
	this.odstep = odstep || 20;
	this.odstep2 = odstep2 || 30;
	this.grubosc = grubosc || 12;

	var p1 = mapa.fromDivPixelToLatLng(new GPoint(this.x-this.odstep,this.y-this.odstep));
	var p3 = mapa.fromDivPixelToLatLng(new GPoint(this.x+this.odstep2*2+6*(this.dlugosc+this.odstep),this.y+this.dlugosc*2+this.odstep));
	var p2 = new GLatLng(p1.lat(),p3.lng());
	var p4 = new GLatLng(p3.lat(),p1.lng());
	var tlo = new GPolygon([p1,p2,p3,p4],'#000000',0,1,'#000000',0.4);
	mapa.addOverlay(tlo);			
	
	this.c1 = new Cyfra(this.x,this.y,this.kolor,this.alfa,this.dlugosc,this.grubosc);
	this.c2 = new Cyfra(this.x+(this.dlugosc+this.odstep),this.y,this.kolor,this.alfa,this.dlugosc,this.grubosc);
	this.c3 = new Cyfra(this.x+this.odstep2+2*(this.dlugosc+this.odstep),this.y,this.kolor,this.alfa,this.dlugosc,this.grubosc);
	this.c4 = new Cyfra(this.x+this.odstep2+3*(this.dlugosc+this.odstep),this.y,this.kolor,this.alfa,this.dlugosc,this.grubosc);
	this.c5 = new Cyfra(this.x+this.odstep2*2+4*(this.dlugosc+this.odstep),this.y,this.kolor,this.alfa,this.dlugosc,this.grubosc);
	this.c6 = new Cyfra(this.x+this.odstep2*2+5*(this.dlugosc+this.odstep),this.y,this.kolor,this.alfa,this.dlugosc,this.grubosc);
	this.odswiez();
	zegary.push(this);
}

Najpierw zapisujemy odpowiednie własności, następnie rysujemy półprzezroczyste tło w kolorze czarnym, na końcu tworzymy kolejno obiekty 6 cyfr, ustawiając odpowiednie parametry w postaci offsetu położenia i właściwości takich jak kolor, grubość itp.

Klasa Cyfra

function Cyfra(x,y,kolor,alfa,dlugosc,grubosc)
{
	this.x = x;
	this.y = y;
	this.kolor = kolor;
	this.alfa = alfa;
	this.grubosc = grubosc;
	this.dlugosc = dlugosc;
	this.polilinie = [];
	this.cyfra = 0;
	this.inicjuj();
}

Po utworzeniu, w przedostatniej linijce wykonujemy metodę inicjuj(), która narysuje odpowiednie kreski:

Cyfra.prototype.inicjuj = function()
{
	if(this.polilinie.length>0)
		return;

	/* tutaj tablica danych o kreskach z listingu #2 w tym tutorialu */

	for(var i=0; i<7; i++)
	{
		var x1 = kreska[i][0][0]+this.x;
		var x2 = kreska[i][1][0]+this.x;
		var y1 = kreska[i][0][1]+this.y;
		var y2 = kreska[i][1][1]+this.y;
		var p1 = mapa.fromDivPixelToLatLng(new GPoint(x1,y1));
		var p2 = mapa.fromDivPixelToLatLng(new GPoint(x2,y2));
		var poli = new GPolyline([p1,p2],this.kolor,this.grubosc,this.alfa);
		mapa.addOverlay(poli);
		poli.hide();
		this.polilinie.push(poli);
	}
};

Pobieramy tu w pętli (wykonywanej 7 razy) dane o położeniu punktów odcinka ze znanej już nam tablicy kreski (omówiłem ją we wstępie), następnie dodajemy offset danej cyfry, konwertujemy punkt na współrzędne geograficzne, rysujemy polilinię na mapie, ukrywamy ją i dodajemy do tablicy polilinii (własność this.polilinie)

Odświeżenie cyfry jest proste:

Cyfra.prototype.narysuj = function()
{
	for(var i=0; i<7; i++)
	{
		if(cyfry[this.cyfra].indexOf(i)>=0)
			this.polilinie[i].hide();
		else
			this.polilinie[i].show();
	}
}

Pozostaje tylko napisać funkcję do odświeżania zegara:

Zegar.prototype.odswiez = function()
{
	var data = new Date();
	var h = data.getHours();
	var m = data.getMinutes();
	var s = data.getSeconds();

	this.c1.cyfra = Math.floor(h/10);
	this.c2.cyfra = h%10;
	this.c3.cyfra = Math.floor(m/10);
	this.c4.cyfra = m%10;
	this.c5.cyfra = Math.floor(s/10);
	this.c6.cyfra = s%10;
	
	this.c1.narysuj();
	this.c2.narysuj();
	this.c3.narysuj();
	this.c4.narysuj();
	this.c5.narysuj();
	this.c6.narysuj();
	
	setTimeout('odswiezZegary()',1000);
};

Komentarz do powyższego kodu jest chyba zbędny. Ostatnią rzeczą jest napisanie funkcji odswiezZegary(), która dla każdego zegara jaki dodaliśmy na mapę wykona metodą odswiez().

Zobacz, jak działa napisany zegar w przykładzie: przykład 1pokaż kod przykładu

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

Oto, co najczęściej czytają internauci, którzy przeczytali ten artykuł:

Dodawanie znaczników na mapę

API v2

Kurs podstaw cz. II: Podstawowe informacje na temat wstawiania markerów (znaczników)


Dodawanie markerów przez użytkownika

API v2

Poradnik pokazuje, w jaki sposób stworzyć formularz, pozwalający na dodawanie markerów


Popularne, darmowe ikony dla markerów

API v2

Kurs podstaw cz. IV: Lista darmowych ikon do wykorzystania w Twojej aplikacji mapowej


Kategorie markerów i polilinii

API v2

Stwórz markery/polilinie w kilku kategoriach, a następnie ukrywaj i pokazuj wybrane kategorie