Wprowadzenie
Edytor Mashup (GME) to jedno z najbardziej oczekiwanych i przydatnych narzędzi dla deweloperów aplikacji typu mashup. GME pomaga deweloperom w tworzeniu i edytowaniu komponentów dynamicznych na stronach internetowych, takich jak mapy, tabele, listy i inne elementy, na podstawie połączeń z danymi zewnętrznymi. Te elementy można następnie umieścić na stronach i blogach za pomocą elementu iframe.Z tego samouczka dowiesz się, jak umieścić plik KML w mapie utworzonej za pomocą GME.
Moje pierwsze wyświetlenia w Edytorze Mashup
- Usługa jest bardzo prosta w obsłudze, a jej interfejs jest przejrzysty i wyraźny, tak jak większość usług Google.
- Zawiera wygodny indeks projektu z stale rosnącą kolekcją przykładów kodu oraz kodu autora.
- Pozwalają łatwo przechowywać dodatkowe zasoby w projekcie (np. pliki graficzne).
- Zawiera łatwy w użyciu debuger XML.
- Zawiera wiele łatwych w użyciu przykładowych aplikacji.
GME dla programistów KML
Przed powstaniem internetu dane przestrzenne były tradycyjnie trudne do udostępnienia. Jednak w miarę rozwoju internetu tworzenie map stały się standardowym sposobem łatwego udostępniania danych systemom informacji geograficznych (GIS) osobom z całego świata. Format KML staje się standardem w prezentowaniu i wymianie danych GIS, ponieważ jest kompaktowy, łatwy w programowaniu i obsługiwany przez popularne aplikacje, takie jak Google Earth i Mapy Google.
Do niedawna proces tworzenia i edytowania stron na podstawie JavaScriptu stanowił duży problem dla deweloperów plików KML. Stworzenie mashupu i debugowanie go wymagało wielu dodatkowych kroków. GME pozwala na szybkie tworzenie mashupów w formacie KML z kilku podstawowych komponentów. Proces tworzenia nie wymaga specjalistycznej znajomości języka HTML ani JavaScript. Przykładowe projekty GME wystarczają na początek.
W tym przykładzie użyjemy pliku KML wskazującego kolekcję zdjęć zrobionych podczas lotu Pict Earth USA.
To jest mashup z mapami Pict Earth:
Aby zintegrować plik KML z projektem GME, korzystając z interfejsu Google Maps API:
Krok 1. Wybierz plik KML
Krok 2. Utwórz nowy projekt GME
Krok 3. Utwórz funkcję, aby dodać plik KML
Krok 4. Dodaj mapę
Krok 5. Przetestuj składankę
1 } 1 } 1 } 1
Krok 1. Wybierz plik KML
Wybierz plik KML, który chcesz dodać do mapy. Może to być dowolny element obsługiwany w Mapach Google. Musi być hostowana na publicznie dostępnym serwerze.
Krok 2. Utwórz nowy projekt GME
Utwórz nowy pusty projekt GME.
Tak wygląda pusty projekt GME:
Dodaj tytuł i nazwę funkcji.
<gm:page title="Wykreślona misja" auth="false" onload=" KMLPE()"></gm:page>
Krok 3. Utwórz funkcję, aby dodać plik KML
Utwórz funkcję JavaScript ze ścieżką do pliku KML, która ma zostać dodana do mapy.
<script>
function kmlPE()
{
<!-- Get map -->
var myMap = google.mashups.getObjectById('map').getMap();
<!-- Get KML -->
var geoXml = new GGeoXml("http://pictearthusa.com/kml/missions.kml");
<!--Place KML on Map -->
myMap.addOverlay(geoXml);
<!--Set zoom on double click -->
myMap.enableDoubleClickZoom();
}
</script>
Krok 4. Dodaj mapę
Dodaj mapę i parametry.
<gm:map id="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>
Krok 5. Przetestuj usługę mashup.
Naciśnij przycisk Test (F4).
To jest obraz mashupu Pict Earth przetestowany w trybie piaskownicy.
Teraz możemy zweryfikować tekst zgłoszenia i zobaczyć pierwszy wynik. Możemy dodać tytuł i linki oraz przetestować je ponownie.
Krok 6. Opublikuj mashup
Ustaw nazwę projektu, a następnie opublikuj go. W ten sposób uzyskasz trwały link do swojej aplikacji typu mashup, której możesz użyć do umieszczenia jej na stronach internetowych. W moim przykładzie jest to link do strony głównej projektu GME. Zobaczysz też kod źródłowy projektu.
Krok 7. Dodaj usługę typu mashup do strony internetowej
Dodaj usługę mashup do strony internetowej za pomocą elementu iframe. Aby na przykład wstawić przykładowy projekt, dodaj ten fragment kodu:
<iframe style="WIDTH: 439px; HEIGHT: 491px" src="http://pemissions.googlemashups.com/" frameborder="0"></iframe>
Oto przykłady aplikacji typu mashup na stronie internetowej i w blogu.
Możesz też dodać do projektu kod Google Analytics, aby śledzić statystyki dotyczące osób wyświetlających stronę. Możesz to zrobić tak:
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">uacct = "youraccountnumber";urchinTracker();</script>
Krok 8. Umieść film w GME Gallery
Opublikuj swoją usługę w galerii mashup w GME. Umożliwi to innym użytkownikom wyświetlanie Twojej mashupy.
Więcej informacji:
Zajrzyj do przewodnika dla początkujących użytkowników montażystów Google, w którym szczegółowo opisujemy proces tworzenia witryn integracyjnych. Zapoznaj się też z listą tagów, gdzie znajdziesz krótki opis wszystkich tagów GM w przykładach.
Kod:
Oto cały kod KML przy użyciu Pict Earth w GME:
<gm:page title="Pict Earth missions" authenticate="false" onload="kmlPE()>
<!-- Map definition -->
<gm:mapid="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>
<script>
function kmlPE(){
<!-- Get map -->
var myMap = google.mashups.getObjectById('map').getMap();
<!-- Get KML -->
var geoXml = new GGeoXml("http://pictearthusa.com/kml/missions.kml");
<!-- Place KML on Map -->
myMap.addOverlay(geoXml);
<!-- Set zoom on double click -->
myMap.enableDoubleClickZoom();
}
</script>
</gm:page>
Co dalej?
Opublikowanej aplikacji typu mashup możesz użyć w pliku KML jako parametru, który zostanie umieszczony w innej aplikacji lub wczytany bezpośrednio jako mapa. Na przykład ta strona:
http://param.googlemashup.com mashup GME. Możesz bezpośrednio odwoływać się do pliku KML za pomocą mashupa, dodając w adresie URL parametr IME=: http://param.googlemashups.com/?json=http://maptools.googlepages.com/cta.jsonMożesz też utworzyć gadżet ze swojego projektu. Po przesłaniu pliku przejdź do menu pliku, kliknij Prześlij gadżet i postępuj zgodnie ze wskazówkami. Dzięki temu możesz łatwo dodać tę aplikację do spersonalizowanej strony głównej Google lub innych stron internetowych i udostępnić innym osobom.