Pierwszym krokiem jest otrzymanie klucza dla naszej strony - podobnie jak to było w poprzedniej wersji Google Maps. Po jego otrzymaniu dołączamy do naszej strony plik JS z API.
<script src="http://www.google.com/jsapi?key=klucz"></script>Następnie uruchamiamy metodę dynamicznego ładowania API google.load z parametrem nazwy API czyli earth oraz wersją - najnowsza stabilna wersja to 1. Jeżeli chcemy używać wersji testowych wówczas wpisujemy "1.x".
google.load("earth", 1);
Po załadowaniu API możemy zacząć umieszczać nasz obiekt na stronie. Google Earth dopasowuje się do wielkości węzła (kontenera), w który go włożymy - najprościej będzie uruchomić go w znaczniku <div>. <div id="earth" style="width: 580px; height: 350px;"></div>Ostatnim punktem jest uruchomienie instancji Google Earth w wybranym kontenerze. W tym momencie zaczynamy się posługiwać się API do Google Earth.
Utworzenie instancji odbywa się poprzez wywołanie metody getInstance z obiektu google.earth. Jako parametry podajemy identyfikator obiektu, w którym ma być umieszczony Google Earth, oraz dwie funkcje callback'owe - pierwsza wywoływana po załadowaniu się obiektu, druga, która powinna się wywoływać w przypadku błędu.
google.earth.createInstance('earth', initFunction, errorFunction);
Wywołanie akcji odnoszące się do obiektu google.earth powinno odbyć się po załadowaniu API - w tym celu używamy metody google.setOnLoadCallback, gdzie jako parametr podajemy wykonywaną funkcję. Wówczas uzyskamy coś następującego:google.setOnLoadCallback(function() {
google.earth.createInstance('earth', initFunction, errorFunction);
});
Do funkcji initFunction jest przekazywany parametr z utworzonym obiektem - co otwiera nam drogę do manipulowania bezpośrednio na obiekcie. Dobrą praktyką jest umieszczenie tego obiektu jako zmienna globalna lub właściwość jakiegoś obiektu - tak, aby w przyszłości istniała możliwość dostania się do niego.Po uruchomieniu konieczne jest włączenie parametru visibility w oknie obiektu poprzez wywołanie komendy getWindow().setVisibility(true) na przekazanym obiekcie
var earth;
function initFunction(obj) {
earth = obj;
earth.getWindow().setVisibility(true);
}
Żeby nie pozostawić naszej Ziemi oddalonej o miliony kilometrów od użytkownika po starcie warto przybliżyć ją do wskazanego miejsca - np. do Wrocławia. W tym celu musimy utworzyć nowy widok, nadać ustawienia położenia i ustawić zmieniony widok jako domyślny.var lookAt = earth.createLookAt('');
lookAt.setLatitude(51.11123);
lookAt.setLongitude(17.05876);
lookAt.setRange(500.0);
earth.getView().setAbstractView(lookAt);
Ostatecznie otrzymujemy taki kod:<html>
<head>
<script src="http://www.google.com/jsapi?key=klucz"></script>
<script>
var earth;
google.load("earth", 1);
function initFunction(obj) {
earth = obj;
earth.getWindow().setVisibility(true);
var lookAt = earth.createLookAt('');
lookAt.setLatitude(51.11123);
lookAt.setLongitude(17.05876);
lookAt.setRange(500.0);
earth.getView().setAbstractView(lookAt);
}
google.setOnLoadCallback(function() {
google.earth.createInstance('earth', initFunction, function() {});
});
</script>
</head>
<body>
<div id="earth" style="width: 580px; height: 350px;"></div>
</body>
</html>
A oto ostateczny efekt:
Brak komentarzy:
Prześlij komentarz