Poznaj Google Maps API

Wyświetlanie współrzędnych myszy

« powrót do listy kategorii

W tym tutorialu dowiesz się, jak wyświetlić elegancki pasek ze współrzędnymi myszy.

Przygotowanie

Dodaj w kodzie html odpowiedni obiekt, w którym będą wyświetlały się współrzędne, ew. nadal mu odpowiedni wygląd za pomocą CSS. W moim przykładzie będzie to wyglądać następująco:

<div id="wspolrzedneBelka">
<strong>Współrzędne kursora:</strong>
</div>	

Teraz za pomocą odpowiedniego zdarzenia wyświetlimy tu współrzędne.

Zdarzenie mousemove

W tym celu przeprowadzimy nasłuch na zdarzenie mousemove, w którym wywołanie zostana funkcja, zwracająca punkt w jednostkach mapy (GLatLng):

GEvent.addListener(mapa,'mousemove',function(punkt)
{
	var lat = punkt.lat().toFixed(5);  // pobieramy współrzędne
	var lng = punkt.lng().toFixed(5);

	var zoom = mapa.getZoom(); // pobieramy zoom

	// formujemy napis
	var napis = '<strong>Współrzędne kursora:</strong> B = '+lat+', L = '+lng+', <strong>zoom:</strong> '+zoom;
	document.getElementById('wspolrzedneBelka').innerHTML=napis;
});

punkt jest obiektem klasy GLatLng, stąd za pomocą metod .lat() i .lon() wyciągamy z niego szerokość i długość geograficzną. Następnie zaokrąglamy je do postaci z pięcioma miejscami po przecinku. Później wystarczy zamienić zawartość obiektu wspolrzedneBelka na odpowiedni komunikat o współrzędnych.

Możesz sprawdzić działanie powyższego skryptu, klikając poniżej: przykład 1pokaż kod przykładu

Sformatowanie współrzędnych

Dziesiętna postać współrzędnych nie jest zbyt czytelna dla człowieka. Napiszemy funkcję, która skonwertuje współrzędne na postać DMS.

function deg2dms(liczba,latlng)
{
	// jeśli nie określono argumentu to nie wykonujemy funkcji
	if(latlng!='lat' && latlng!='lng') return;
	
	if(liczba>0)
		var znak=0;
	else
		var znak=1;
	
	liczba = Math.abs(liczba);
	
	var d = Math.floor(liczba);
	var s = ((liczba - Math.floor(liczba))*3600);
	var m = Math.floor(s/60);
	
	s = (s - m*60).toFixed(2);
	
	if(s<10)
		s='0'+s;
	if(m<10)
		m='0'+m;
	
	if(latlng=='lat')
		var sufix=['N','S'];
	else
		var sufix=['E','W'];
		
	return d+'°'+m+'\''+s+'\'\' '+sufix[znak];
}

Algorytm jest dość prosty - stopnie wyznaczone są częścią całkowitą, a część dziesiętna pomnożona przez 3600 równa jest liczbie sekund. Z tej liczby wyciągamy liczbę minut (każda po 60 sekund), a reszta z dzielenia jest liczbą sekund. Następnie dodajemy zero z przodu minut i sekund, jeśli są liczbami mniejszymi niż 10 (jednocyfrowymi) Później sprawdzany jest typ współrzędnej, i na jego podstawie tworzona dwuelementowa tablica z oznaczeniami półkul. Następnie zwracany jest sformatowany ciąg. Zwróć uwagę, że na początku działania zapamiętujemy znak liczby, a następnie pozbywamy się go za pomocą funkcji Math.abs().

Sposób użycia funkcji deg2dms():

var lat = deg2dms(punkt.lat(),'lat'); // ostatni argument mówi o rodzaju współrzędnej
var lng = deg2dms(punkt.lng(),'lng');

Sprawdź zmodyfikowaną wersję poprzedniego przykładu, wyświetlającego sformatowane współrzędne: przykład 2pokaż kod przykładu