Interfejs Maps JavaScript API w wersji 2 nie jest już dostępny od 26 maja 2021 r. W rezultacie mapy witryny w wersji 2 przestaną działać i zwrócą błędy JavaScript. Aby nadal korzystać z map w swojej witrynie, przejdź na interfejs Maps JavaScript API w wersji 3. Ten przewodnik pomoże Ci przejść przez ten proces.
Opis
Każda aplikacja będzie miała nieco inny proces migracji, ale istnieją pewne aspekty typowe dla wszystkich projektów:
- Wygeneruj nowy klucz. Interfejs Maps JavaScript API używa teraz Google Cloud Console do zarządzania kluczami. Jeśli nadal używasz klucza v2, zanim rozpoczniesz migrację, zdobądź nowy klucz interfejsu API.
- Zaktualizuj pakiet rozruchowy API. Większość aplikacji wczyta ten interfejs API do JavaScriptu w wersji 3 za pomocą tego kodu:
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
- Zaktualizuj kod. Wymagana liczba zmian będzie zależała od Twojej aplikacji. Typowe zmiany:
- Zawsze używaj odwołania do przestrzeni nazw google.maps. W wersji 3 cały kod interfejsu Maps JavaScript API jest przechowywany w przestrzeni nazw
google.maps.*
, a nie w globalnej przestrzeni nazw. W ramach tego procesu zmieniono nazwę większości obiektów. Na przykład zamiast GMap2
wczytasz wartość google.maps.Map
.
- Usuń wszelkie odwołania do nieaktualnych metod. Usunięto różne
metody ogólnego zastosowania, takie jak
GDownloadURL
i GLog
.
Zastąp tę funkcję bibliotekami narzędzi innych firm lub usuń te odwołania z kodu.
- (Opcjonalnie) Dodaj biblioteki do kodu. Wiele funkcji zostało przeniesionych do bibliotek narzędzi, dzięki czemu każda aplikacja będzie musiała wczytać tylko te części interfejsu API, które będą używane.
- (Opcjonalnie) Skonfiguruj projekt, aby korzystał z rozszerzeń zewnętrznych w wersji 3.
Rozszerzenia v3 mogą służyć do weryfikacji kodu za pomocą kompilatora zamknięcia lub do autouzupełniania w IDE.
Dowiedz się więcej o kompilacji zaawansowanej i zaawansowanych.
- Testuj i powtarzaj. Jeszcze musisz coś zrobić, ale mamy dobrą wiadomość: jesteś na dobrej drodze do przejścia na nową wersję map w wersji 3.
Zmiany w wersji 3 interfejsu Maps JavaScript API
Przed zaplanowaniem migracji poświęć trochę czasu na zrozumienie różnic między interfejsem API JavaScript JavaScript w wersji 2 i interfejsem Maps JavaScript API w wersji 3. Najnowsza wersja interfejsu Maps JavaScript API została stworzona od podstaw z myślą o nowoczesnych technikach programowania, zwiększonym wykorzystaniu bibliotek i uproszczonym interfejsie API.
Do interfejsu API dodaliśmy wiele nowych funkcji i zmieniliśmy kilka znanych funkcji. W tej sekcji omawiamy niektóre kluczowe różnice między tymi wersjami.
Oto niektóre zmiany w interfejsie API wersji 3:
- Prosta biblioteka podstawowa. Wiele dodatkowych funkcji zostało przeniesionych do bibliotek, co skraca czas wczytywania i analizowania podstawowego interfejsu API, co umożliwia szybkie wczytywanie mapy na dowolnym urządzeniu.
- Zwiększona wydajność kilku funkcji, takich jak renderowanie wielokątów i umieszczanie znaczników.
- Nowe podejście do limitów wykorzystania po stronie klienta, które lepiej uwzględnia adresy udostępniane przez mobilne serwery proxy i firmowe zapory sieciowe.
- Dodaliśmy obsługę kilku nowoczesnych przeglądarek i przeglądarek mobilnych. Obsługa przeglądarki Internet Explorer 6 została usunięta.
- Wiele klas pomocniczych o charakterze ogólnym (
GLog
lub GDownloadUrl
) zostało usuniętych. Obecnie istnieje wiele świetnych bibliotek JavaScript, które zapewniają podobne funkcje, takie jak zamknięcie czy jQuery.
- implementacja Street View HTML5, która wczytuje się na dowolnym urządzeniu mobilnym;
- W przypadku niestandardowych widoków Street View możesz dodawać do nich własne zdjęcia, aby udostępniać panoramę stoków narciarskich, domy na sprzedaż lub inne ciekawe miejsca.
- Dostosowywanie Map stylizowanych, które pozwala zmienić sposób wyświetlania elementów na mapie podstawowej, tak aby pasował do unikalnego stylu wizualnego.
- Obsługa kilku nowych usług, takich jak ElevationService i Odległość matryca.
- Ulepszone usługi wyznaczania trasy obejmują trasy alternatywne, optymalizację tras (przybliżone rozwiązania problemu z podróżą sprzedawcy), wskazówki dojazdu rowerem (z warstwą rowerową), wskazówki dojazdu transportem publicznym oraz trasy do przeciągania.
- Zaktualizowany format geokodowania, który zawiera dokładniejsze informacje o typie niż wartość
accuracy
w interfejsie Geocoding API v2.
- Obsługiwanie wielu systemów informacyjnych w ramach jednej mapy
Twój nowy klucz
Interfejs Maps JavaScript API w wersji 3 korzysta z nowego systemu kluczy z wersji 2. Być może korzystasz już z klucza w wersji 3. W takim przypadku nie musisz wprowadzać żadnych zmian. Aby to sprawdzić, sprawdź adres URL, z którego wczytano interfejs Maps JavaScript API pod kątem parametru key
. Jeśli wartość klucza zaczyna się od 'ABQIAA', używasz klucza w wersji 2. Jeśli masz klucz v2, musisz przejść na klucz v3 w ramach migracji. Dzięki temu:
Klucz jest przekazywany podczas wczytywania interfejsu Maps JavaScript API w wersji 3.
Więcej informacji o generowaniu kluczy interfejsu API
Jeśli używasz interfejsu API Map Google dla Firm, być może używasz identyfikatora klienta z parametrem client
zamiast parametru key
. Jednak identyfikatory klientów są nadal obsługiwane w interfejsie Maps JavaScript API w wersji 3 i nie trzeba ich uaktualniać.
Wczytywanie interfejsu API
Pierwsza zmiana, jaką musisz wprowadzić w kodzie, obejmuje sposób wczytywania interfejsu API. W wersji 2 wczytujesz interfejs Maps JavaScript API za pomocą żądania skierowanego do http://maps.google.com/maps
. Jeśli ładujesz interfejs Maps JavaScript API w wersji 3, musisz wprowadzić te zmiany:
- Wczytywanie interfejsu API z
//maps.googleapis.com/maps/api/js
- Usuń parametr
file
.
- Zaktualizuj parametr
key
o nowy klucz w wersji 3. Klienci korzystający z Google Maps API for Work powinni używać parametru client
.
- (Dotyczy tylko abonamentu Premium Google Maps Platform) Parametr
client
powinien być podany w przewodniku dla programistów pakietu Premium Google Maps Platform.
- Usuń parametr
v
, aby zażądać najnowszej wersji, lub zmień jego wartość zgodnie ze schematem obsługi wersji 3.
- (Opcjonalnie) Zastąp parametr
hl
wartością language
i zachowaj jego wartość.
- (Opcjonalnie) Dodaj parametr
libraries
, by wczytać opcjonalne biblioteki.
W najprostszym przypadku plik rozruchowy v3 będzie określać tylko parametr klucza interfejsu API:
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
Poniższy przykład przedstawia najnowszą wersję interfejsu Maps JavaScript API v2 w języku niemieckim:
<script src="//maps.google.com/maps?file=api&v=2.x&key=YOUR_API_KEY&hl=de"></script>
Przykład poniżej to równoważne żądanie dla wersji 3.
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=de"></script>
Przedstawiamy przestrzeń nazw google.maps
Najbardziej zauważalna zmiana w interfejsie Maps JavaScript API w wersji 3 to wprowadzenie przestrzeni nazw google.maps
. Interfejs API w wersji 2 domyślnie umieszcza wszystkie obiekty w globalnej przestrzeni nazw, co może spowodować kolidowanie nazw. W wersji 3 wszystkie obiekty znajdują się w przestrzeni nazw google.maps
.
Podczas migracji aplikacji do wersji 3 musisz zmienić kod, aby korzystać z nowej przestrzeni nazw. Niestety wyszukiwanie i zastępowanie ciągu „"google.maps." wygra” – ale jest to dobra zasada, według której warto sprawdzić kod. Poniżej znajdziesz kilka przykładów równoważnych klas wersji 2 i 3.
v2 |
Wersja 3 |
GMap2 |
google.maps.Map |
GLatLng |
google.maps.LatLng |
GInfoWindow |
google.maps.InfoWindow |
GMapOptions |
google.map.MapOptions |
G_API_VERSION |
google.maps.version |
GPolyStyleOptions |
google.maps.PolygonOptions or
google.maps.PolylineOptions |
Usuwanie nieaktualnego kodu
W większości funkcji wersji 2 interfejs Maps JavaScript API w wersji 3 działa równolegle. Jednak niektóre klasy nie są już obsługiwane. W ramach migracji musisz zastąpić te klasy bibliotekami narzędzi innych firm lub usunąć te odwołania z kodu. Istnieje wiele świetnych bibliotek JavaScript, które oferują podobne funkcje, takie jak zamknięcie czy jQuery.
Te klasy nie mają równoległego interfejsu API JavaScript JavaScript w wersji 3:
GBounds | GLanguage |
GBrowserIsCompatible | GLayer |
GControl | GLog |
GControlAnchor | GMercatorProjection |
GControlImpl | GNavLabelControl |
GControlPosition | GObliqueMercator |
GCopyright | GOverlay |
GCopyrightCollection | GPhotoSpec |
GDownloadUrl | GPolyEditingOptions |
GDraggableObject | GScreenOverlay |
GDraggableObjectOptions | GStreetviewFeatures |
GFactualGeocodeCache | GStreetviewLocation |
GGeoAddressAccuracy | GStreetviewOverlay |
GGeocodeCache | GStreetviewUserPhotosOptions |
GGoogleBar | GTileLayerOptions |
GGoogleBarAdsOptions | GTileLayerOverlayOptions |
GGoogleBarLinkTarget | GTrafficOverlayOptions |
GGoogleBarListingTypes | GUnload |
GGoogleBarOptions | GXml |
GGoogleBarResultList | GXmlHttp |
GInfoWindowTab | GXslt |
GKeyboardHandler |
|
Porównywanie kodu
Porównaj 2 proste aplikacje, które zostały napisane za pomocą interfejsów API v2 i v3.
<!DOCTYPE html>
<html>
<head>
<script src="//maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY"></script>
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
<script>
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(
document.getElementById('map'));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
map.addOverlay(new GMarker(new GLatLng(37.4419, -122.1419)));
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
<script>
function initialize() {
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37.4419, -122.1419),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Oto kilka różnic między tymi aplikacjami. Najważniejsze zmiany:
- Adres, z którego został wczytany interfejs API, uległ zmianie.
- Metody
GBrowserIsCompatible()
i GUnload()
nie są już wymagane w wersji 3 i zostały usunięte z interfejsu API.
- Obiekt
GMap2
został zastąpiony przez google.maps.Map
głównym obiektem w interfejsie API.
- Właściwości są teraz wczytywane za pomocą klas opcji. W przykładzie powyżej ustawiamy 3 właściwości wymagane do załadowania mapy:
center
, zoom
i mapTypeId
za pomocą wbudowanego obiektu MapOptions
.
- W wersji 3 domyślny interfejs jest domyślnie włączony. Aby wyłączyć tę funkcję, ustaw właściwość
disableDefaultUI
w obiekcie MapOptions
na wartość „true”.
Podsumowanie
W tym momencie dowiedzieliśmy się więcej o kluczowych kwestiach związanych z migracją z interfejsu API JavaScript Map Google do wersji 2.
Możesz potrzebować więcej informacji, ale zależy to od konkretnego zgłoszenia. W kolejnych sekcjach znajdziesz instrukcje migracji, które mogą się pojawić w poszczególnych przypadkach. Warto też skorzystać z kilku zasobów, które mogą Ci się przydać podczas uaktualniania.
- Interfejs Maps JavaScript API w wersji 3 (Dokumentacja dla deweloperów) to miejsce, w którym znajdziesz więcej informacji o interfejsie API i jego działaniu.
- Więcej informacji o nowych klasach i metodach w interfejsie API wersji 3 znajdziesz w dokumentacji Maps JavaScript API w wersji 3.
- Społeczność Stack Overflow to idealne miejsce do zadawania pytań dotyczących kodu. Na stronie pytania i odpowiedzi dotyczące interfejsu API JavaScript JavaScript znajdziesz w tagach 'google-maps' i #39;google-maps-api-3'.
- Klienci korzystający z abonamentu premium na Google Maps Platform powinni zapoznać się z dokumentacją abonamentu Premium Google Maps Platform.
- Blog Google Geo Developers to świetny sposób, aby poznać najnowsze zmiany związane z interfejsem API.
Jeśli masz pytania lub problemy dotyczące tego artykułu, skorzystaj z linku PRZEŚLIJ OPINIĘ u góry tej strony.
W tej sekcji znajdziesz szczegółowe porównanie najpopularniejszych funkcji interfejsu Maps JavaScript API w wersji 2 i 3. Każda sekcja pliku referencyjnego jest przeznaczona do odczytu indywidualnego. Zalecamy, aby nie czytać tego pliku referencyjnego w całości. Możesz wykorzystać ten materiał, aby przeprowadzić migrację indywidualnie.
- Zdarzenia – rejestrowanie zdarzeń i ich obsługa.
- Elementy sterujące – manipulowanie elementami nawigacyjnymi, które pojawiają się na mapie.
- Nakładki – dodawanie i edytowanie obiektów na mapie.
- Typy map – kafelki składające się na mapę podstawową.
- Warstwy – dodawanie i edytowanie treści jako grupy, takich jak KML lub warstwy Ruch.
- Usługi – obsługa geokodowania, tras dojazdu lub usług Street View w Google.
Zdarzenia
Model zdarzenia w interfejsie Maps JavaScript API w wersji 3 jest podobny do modelu v2, ale uległ on znacznym zmianom.
Nowe zdarzenie obsługi MVC
Interfejs API v3 dodaje nowy typ zdarzenia, aby odzwierciedlić zmiany stanu MVC. Są teraz 2 rodzaje zdarzeń:
- Zdarzenia użytkownika (np. "click" zdarzenia myszy) są rozpowszechniane z interfejsu DOM do interfejsu Maps JavaScript API. Te zdarzenia są odrębne od standardowych zdarzeń DOM.
- Powiadomienia o zmianach stanu MVC odzwierciedlają zmiany w obiektach interfejsu API Map Google i nazywają się zgodnie z konwencją
property_changed
.
Każdy obiekt interfejsu API Map Google eksportuje liczbę nazwanych zdarzeń. Aplikacje zainteresowane określonymi zdarzeniami powinny rejestrować detektory tych zdarzeń i uruchamiać kod po otrzymaniu tych zdarzeń. Ten mechanizm reagujący na zdarzenia jest taki sam w interfejsie Maps JavaScript API w wersji 2 i 3, z tą różnicą, że przestrzeń nazw zmieniła się z GEvent
na google.maps.event
:
GEvent.addListener(map, 'click', function() {
alert('You clicked the map.');
});
google.maps.event.addListener(map, 'click', function() {
alert('You clicked the map.');
});
Usuwanie detektorów zdarzeń
Ze względu na wydajność najlepiej jest usunąć detektor zdarzeń, gdy nie jest już potrzebny. Usuwanie detektora zdarzeń działa w ten sam sposób w wersjach 2 i 3:
- Gdy utworzysz detektor zdarzeń, zwracany jest nieprzezroczysty obiekt (GEventListener w wersji 2 lub MapsEventListener w wersji 3).
- Jeśli chcesz usunąć detektor zdarzeń, przekaż ten obiekt do metody
removeListener()
(GEvent.removeListener()
w wersji 2 lub google.maps.event.removeListener()
w wersji 3), aby go usunąć.
Słuchanie zdarzeń DOM
Jeśli chcesz przechwytywać zdarzenia DOM i odpowiadać na nie, v3 udostępnia metodę statyczną google.maps.event.addDomListener()
odpowiadającą odpowiednikowi GEvent.addDomListener()
w wersji 2.
Używanie przekazywanych argumentów w zdarzeniach
Zdarzenia interfejsu użytkownika często przekazują argument zdarzenia, do którego może uzyskać dostęp detektor. Większość argumentów zdarzeń w wersji 3 została uproszczona, aby zapewnić większą spójność z obiektami w interfejsie API. (Więcej informacji znajdziesz w materiałach referencyjnych w wersji 3).
W odbiornikach zdarzeń w wersji 3 nie ma argumentu overlay
. Jeśli zarejestrujesz zdarzenie click
na mapie w wersji 3, wywołanie zwrotne pojawi się tylko wtedy, gdy użytkownik kliknie mapę podstawową. Jeśli chcesz reagować na te kliknięcia, możesz zarejestrować dodatkowe wywołania zwrotne w nakładkach, które można kliknąć.
// Passes an overlay argument when clicking on a map
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();
GEvent.addListener(map,'click', function(overlay, latlng) {
if (latlng) {
var marker = new GMarker(latlng);
map.addOverlay(marker);
}
});
// Passes only an event argument
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
Opcje
Interfejs Maps JavaScript API wyświetla elementy sterujące, które umożliwiają użytkownikom interakcję z Twoją mapą. Możesz dostosować sposób wyświetlania tych elementów za pomocą interfejsu API.
Zmiany w typach kontroli
Wprowadziliśmy zmiany w typach control
w interfejsie API w wersji 3.
- Interfejs API w wersji 3 obsługuje dodatkowe typy map, w tym mapy terenu oraz możliwość dodawania niestandardowych typów map.
- Wersja hierarchiczna wersji 2 (
GHierarchicalMapTypeControl
) nie jest już dostępna.
Podobny efekt możesz osiągnąć za pomocą ustawienia google.maps.MapTypeControlStyle.HORIZONTAL_BAR
.
- Układ poziomy podany w
GMapTypeControl
w wersji 2 nie jest dostępny w wersji 3.
Dodawanie elementów sterujących do mapy
W interfejsie Maps JavaScript API w wersji 2 możesz dodać do mapy elementy sterujące metodą addControl()
obiektu mapy. W wersji 3 zamiast bezpośrednio uzyskiwać dostęp do elementów sterujących lub modyfikować je, modyfikujesz powiązany obiekt MapOptions
. Poniższy przykład pokazuje, jak dostosować mapę, aby uzyskać dostęp do tych elementów:
- przyciski umożliwiające użytkownikom przełączanie się między dostępnymi typami map.
- skala
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
// Add controls
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Add controls
mapTypeControl: true,
scaleControl: true
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
Elementy sterujące pozycjonowaniem na mapie
Elementy sterujące pozycjonowaniem znacząco zmieniły się w wersji 3. W wersji 2 metoda addControl()
przyjmuje opcjonalny drugi parametr, który umożliwia określenie pozycji elementu względem rogów mapy.
W wersji 3 określasz pozycję kontrolną we właściwości position
opcji opcji. Położenie tych elementów sterujących nie jest absolutne. Zamiast tego interfejs API rozmieszcza elementy sterujące inteligentnie według istniejących elementów mapy zgodnie z określonymi ograniczeniami (np. rozmiaru mapy).
Dzięki temu możesz mieć pewność, że ustawienia domyślne są zgodne z Twoimi ustawieniami.
Więcej informacji znajdziesz w artykule Kontrola nad pozycjonowaniem w wersji 3.
Poniższe elementy sterujące zmianą pozycji z powyższych przykładów:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
// Add map type control
map.addControl(new GMapTypeControl(), new GControlPosition(
G_ANCHOR_TOP_LEFT, new GSize(10, 10)));
// Add scale
map.addControl(new GScaleControl(), new GControlPosition(
G_ANCHOR_BOTTOM_RIGHT, new GSize(20, 20)));
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Add map type control
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT
},
// Add scale
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT
}
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
Elementy sterujące
Interfejs Maps JavaScript API umożliwia tworzenie niestandardowych elementów sterujących nawigacją.
Aby dostosować elementy sterujące za pomocą interfejsu API w wersji 2, musisz klasyfikować klasę GControl
i zdefiniować moduły obsługi metod initialize()
i getDefaultPosition()
.
Nie ma odpowiednika klasy GControl
w wersji 3. Elementy sterujące są natomiast przedstawiane jako elementy DOM. Aby dodać niestandardową kontrolę za pomocą interfejsu API w wersji 3, utwórz strukturę DOM dla konstruktora jako element podrzędny elementu Node
(np. element <div>
) i dodaj detektory zdarzeń, które będą obsługiwane przez wszystkie zdarzenia DOM. Umieść Node
w mapachcontrols[position]
i dodaj do mapy instancję niestandardowego elementu sterującego.
Biorąc pod uwagę implementację klasy HomeControl
, która spełnia powyższe wymagania dotyczące interfejsu (szczegóły znajdziesz w dokumentacji Ustawienia niestandardowe), poniżej znajdziesz przykładowy kod pokazujący, jak dodać do mapy niestandardowe elementy sterujące.
map.addControl(new HomeControl(),
GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10)));
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(
homeControlDiv);
Nakładki
Nakładki odzwierciedlają obiekty, które „dostajesz” do mapy, aby oznaczać punkty, linie, obszary lub kolekcje obiektów.
Dodawanie i usuwanie nakładek
Typy obiektów reprezentowanych przez nakładkę są takie same w wersjach 2 i 3, ale są obsługiwane w inny sposób.
Nakładki w interfejsie API w wersji 2 zostały dodane do mapy i usunięte z metody addOverlay()
i removeOverlay()
obiektu GMap2
. W wersji 3 przypisujesz mapę do nakładki za pomocą właściwości map
powiązanej klasy opcji nakładki.
Możesz też dodać lub usunąć nakładkę bezpośrednio, wywołując metodę setMap()
obiektu nakładki i określając odpowiednią mapę. Ustawienie właściwości mapy na null
spowoduje usunięcie nakładki.
Brak metody clearOverlays()
w wersji 3.
Jeśli chcesz zarządzać zestawem nakładek, utwórz tablicę do przechowywania nakładek. Używając tej tablicy, możesz wywoływać setMap()
na każdej nakładce w tablicy (pomijając null
, jeśli chcesz je usunąć).
Znaczniki przeciągane
Domyślnie znaczniki są klikalne, ale nie można ich przeciągać. W tych dwóch próbkach znajduje się znacznik, który można przeciągać:
var myLatLng = new GLatLng(-25.363882, 131.044922);
var map = new GMap2(document.getElementById('map'));
map.setCenter(myLatLng, 4);
var marker = new GMarker(latLng, {
draggable: true
});
map.addOverlay(marker);
var myLatLng = new google.maps.LatLng(-25.363882, 131.044922);
var map = new google.maps.Map(
document.getElementById('map'), {
center: myLatLng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatLng,
draggable: true,
map: map
});
Ikony
Możesz zdefiniować niestandardową ikonę, która będzie wyświetlana zamiast domyślnego znacznika.
Aby użyć niestandardowego obrazu w wersji 2, możesz utworzyć instancję GIcon
z poziomu instancji G_DEFAULT_ICON type
i zmodyfikować ją. Jeśli obraz jest większy lub mniejszy niż ikona domyślna, musisz go określić w instancji GSize
.
Interfejs API w wersji 3 nieznacznie upraszcza ten proces.
Wystarczy, że ustawisz we właściwości icon
znacznik na adres URL niestandardowego obrazu, a interfejs API automatycznie ustawi rozmiar ikony.
Interfejs Maps JavaScript API zapewnia też obsługę złożonych ikon.
Złożona ikona może zawierać wiele kafelków i skomplikowanych kształtów, a także określać sposób wyświetlania obrazów w stosunku do innych nakładek. Aby dodać kształt do znacznika w wersji 2, musisz określić dodatkową właściwość w każdej instancji GIcon
i przekazać tę opcję jako konstruktor GMarker
. W wersji 3 ikony określone w ten sposób powinny ustawić właściwość icon
jako obiekt typu Icon
.
cienie znacznika nie są obsługiwane w wersji 3.
W poniższych przykładach widać flagę plaży przy plaży Bondi w Australii, gdzie przezroczysta część ikony nie jest klikalna:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();
var flagIcon = new GIcon(G_DEFAULT_ICON);
flagIcon.image = '/images/beachflag.png';
flagIcon.imageMap = [1, 1, 1, 20, 18, 20, 18 , 1];
var bbLatLng = new GLatLng(-33.890542, 151.274856);
map.addOverlay(new GMarker(bbLatLng, {
icon: flagIcon
}));
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var bbLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var bbMarker = new google.maps.Marker({
icon: '/images/beachflag.png'
shape: shape,
position: bbLatLng,
map: map
});
Linie łamane
Linia łamana składa się z tablicy LatLng
sekund oraz serii segmentów, które łączą te lokalizacje w kolejności.
Tworzenie i wyświetlanie obiektu Polyline
w wersji 3 jest podobne do używania obiektu GPolyline
w wersji 2. W tych przykładach półprzezroczyste, 3-pikselowe linie łamane w stylu geodetycznym z Zurychu do Sydney przez Singapur:
var polyline = new GPolyline(
[
new GLatLng(47.3690239, 8.5380326),
new GLatLng(1.352083, 103.819836),
new GLatLng(-33.867139, 151.207114)
],
'#FF0000', 3, 0.5, {
geodesic: true
});
map.addOverlay(polyline);
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(47.3690239, 8.5380326),
new google.maps.LatLng(1.352083, 103.819836),
new google.maps.LatLng(-33.867139, 151.207114)
],
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 3,
geodesic: true
});
polyline.setMap(map);
Zakodowane linie łamane
W wersji 3 nie można tworzyć obiektów Polyline
bezpośrednio z zakodowanych linii łamanych. Zamiast tego Biblioteka geometrii zawiera metody kodowania i dekodowania linii łamanych. Więcej informacji o wczytywaniu tej biblioteki znajdziesz w bibliotekach w interfejsie API Map Google w wersji 3.
Poniższe przykłady dotyczą tej samej zakodowanej linii łamanej. Kod v3 wykorzystuje metodę decodePath()
z przestrzeni nazw google.maps.geometry.encoding
.
var polyline = new GPolyline.fromEncoded({
points: 'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H',
levels: 'PPP',
zoomFactor: 2,
numLevels: 18,
color: '#ff0000',
opacity: 0.8,
weight: 3
});
map.addOverlay(polyline);
var polyline = new google.maps.Polyline({
path: google.maps.geometry.encoding.decodePath(
'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H'),
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 3,
});
polyline.setMap(map);
Wielokąty
Wielokąt określa region w pętli. Podobnie jak obiekt Polyline
obiekty Polygon
składają się z punktów w określonej kolejności. Klasa Polygon
w wersji 3 jest prawie taka sama jak klasa GPolygon
w wersji 2, z tą różnicą, że nie musisz już powtarzać początkowego wierzchołka na końcu ścieżki, aby zamknąć pętlę. Interfejs API v3 automatycznie zamknie wszystkie wielokąty, narysowając kreski łączące ostatnią z powrotem ze pierwszą współrzędną. Te fragmenty kodu tworzą wielokąt reprezentujący trójkąt trójkąta Bermudy:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(24.886436, -70.268554), 5);
var bermudaTriangle = new GPolygon(
[
new GLatLng(25.774252, -80.190262),
new GLatLng(18.466465, -66.118292),
new GLatLng(32.321384, -64.75737),
new GLatLng(25.774252, -80.190262)
],
'#FF0000', 2, 0.8, '#FF0000', 0.35);
map.addOverlay(bermudaTriangle);
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(24.886436, -70.268554),
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 5
});
var bermudaTriangle = new google.maps.Polygon({
paths: [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
],
strokeColor: '#FF0000',
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
Kształty, które mogą być edytowane przez użytkowników
Linie i wielokąty można edytować jako użytkownik. Te fragmenty kodu są równoważne:
map.addOverlay(polyline);
polyline.enableEditing();
polyline.setMap(map);
polyline.setEditable(true);
Bardziej zaawansowane możliwości rysowania znajdziesz w Bibliotece rysunków w dokumentacji wersji 3.
Okna informacyjne
InfoWindow
wyświetla zawartość w pływającym oknie nad mapą. Istnieje kilka istotnych różnic między oknami informacyjnymi w wersji 2 i 3:
- Interfejs v2 obsługuje tylko
GInfoWindow
na mapie, a interfejs v3 obsługuje wiele równoczesnych InfoWindow
na każdej mapie.
- Gdy klikniesz mapę, wersja
InfoWindow
pozostanie otwarta. Wersja 2 GInfoWindow
zamyka się automatycznie po kliknięciu mapy. Możesz skonfigurować emulację v2, dodając odbiornik click
do obiektu Map
.
- Interfejs API w wersji 3 nie zapewnia natywnej obsługi interfejsu z kartami
InfoWindow
.
Nakładki na powierzchnię
Aby umieścić obraz na mapie, użyj obiektu GroundOverlay
. Konstruktor elementu GroundOverlay
jest zasadniczo taki sam w wersjach 2 i 3. Określa adres URL obrazu i granice obrazu jako parametry.
Poniższy przykład pokazuje na mapie zabytkową mapę Newark, NJ:
var bounds = new GLatLngBounds(
new GLatLng(40.716216, -74.213393),
new GLatLng(40.765641, -74.139235));
var overlay = new GGroundOverlay(
'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds);
map.addOverlay(overlay);
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216, -74.213393),
new google.maps.LatLng(40.765641, -74.139235));
var overlay = new google.maps.GroundOverlay(
'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds);
overlay.setMap(map);
Typy map
Typy map dostępne w wersjach 2 i 3 są różne, ale wszystkie podstawowe typy map są dostępne w obu wersjach interfejsu API. Domyślnie wersja 2 korzysta z standardowych kafelków &map drogowych. Wersja 3 wymaga jednak określonego typu mapy podczas tworzenia obiektu google.maps.Map
.
Typowe typy map
Cztery podstawowe typy map są dostępne zarówno w wersji 2, jak i 3:
MapTypeId.ROADMAP
(zastępuje G_NORMAL_MAP
) powoduje wyświetlenie widoku mapy drogi.
MapTypeId.SATELLITE
(zastępuje G_SATELLITE_MAP
) wyświetla zdjęcia satelitarne w Google Earth.
- W widoku
MapTypeId.HYBRID
(zastępuje G_HYBRID_MAP
) będą się wyświetlać normalne i widoki satelitarne.
MapTypeId.TERRAIN
(zastąpi G_PHYSICAL_MAP
) udostępnia mapę fizyczną opartą na informacjach o terenie.
Oto przykład ustawienia mapy w wersji 2 i 3 w widoku terenu:
map.setMapType(G_PHYSICAL_MAP);
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
W interfejsie Maps JavaScript v3 wprowadziliśmy też kilka zmian w mniej popularnych typach map:
- Fragmenty mapy dla ciasnych elementów innych niż Earth są niedostępne jako typy map w interfejsie API v3, ale można je otworzyć jako niestandardowe typy map, jak pokazano w tym przykładzie.
- W wersji 3 nie ma specjalnego typu mapy, który zastępuje typ
G_SATELLITE_3D_MAP
zamiast wersji 2. Zamiast tego możesz zintegrować wtyczkę Google Earth z mapami v3 za pomocą tej biblioteki.
Maksymalne powiększenie
Zdjęcia satelitarne nie zawsze są dostępne przy wysokim powiększeniu. Jeśli chcesz uzyskać najwyższy dostępny poziom powiększenia przed ustawieniem poziomu powiększenia, użyj klasy google.maps.MaxZoomService
. Ta klasa zastępuje metodę GMapType.getMaxZoomAtLatLng()
z wersji 2.
var point = new GLatLng(
180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.setCenter(point);
map.setMapType(G_HYBRID_MAP);
map.getCurrentMapType().getMaxZoomAtLatLng(point,
function(response) {
if (response.status) {
map.setZoom(response.zoom);
} else {
alert("Error in Max Zoom Service.");
}
});
var myLatlng = new google.maps.LatLng(
180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new google.maps.Map(
document.getElementById("map"),{
zoom: 0,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var maxZoomService = new google.maps.MaxZoomService();
maxZoomService.getMaxZoomAtLatLng(
myLatlng,
function(response) {
if (response.status == google.maps.MaxZoomStatus.OK) {
map.setZoom(response.zoom);
} else {
alert("Error in Max Zoom Service.");
}
});
Zdjęcia lotnicze z lotu ptaka
W przypadku zdjęć lotniczych w wersji 3 elementy sterujące są podobne do elementów sterujących w wersji GLargeZoomControl3D
(2 z dodatkową opcją pełnoekranowego obrotu), która pozwala przełączać się między obsługiwanymi kierunkami.
Możesz śledzić miasta, w których zdjęcia 45° są obecnie dostępne na tej mapie. Gdy zdjęcia 45° są dostępne, do przycisku Satelita interfejsu API Map Google jest dodawana opcja podmenu.
Warstwy
Warstwy to obiekty na mapie składające się z co najmniej jednej nakładki. Możesz zmanipulować je jako pojedynczą jednostkę i ogólnie odzwierciedlają kolekcje obiektów.
Obsługiwane warstwy
Interfejs API w wersji 3 zapewnia dostęp do kilku różnych warstw. Te warstwy pokrywają się z klasą GLayer
w wersji 2 w tych obszarach:
-
Obiekt
KmlLayer
renderuje elementy KML i GeoRSS na nakładki v3, co jest odpowiednikiem warstwy GeoXml
w wersji 2.
- Obiekt
TrafficLayer
renderuje warstwę pokazującą warunki ruchu, podobnie jak nakładka GTrafficOverlay
w wersji 2.
Te warstwy różnią się od wersji 2. Różnice opisane poniżej. Można je dodać do mapy, wywołując właściwość setMap()
, przesyłając obiekt Map
, w którym wyświetla się warstwę.
Więcej informacji o obsługiwanych warstwach znajdziesz w dokumentacji warstw.
Warstwy KML i GeoRSS
Interfejs Maps JavaScript API obsługuje formaty danych KML i GeoRSS, aby wyświetlać informacje geograficzne. Jeśli chcesz uwzględnić je na mapie, pliki KML lub GeoRSS muszą być dostępne publicznie. W wersji 3 te formaty danych są wyświetlane za pomocą wystąpienia KmlLayer
, które zastępuje obiekt GGeoXml
z wersji 2.
Interfejs API v3 jest bardziej elastyczny podczas renderowania pliku KML, dzięki czemu możesz uchronić się przed obiektów InfoWindows i modyfikować odpowiedź na kliknięcie. Więcej informacji znajdziesz w dokumentacji warstw KML i GeoRSS w wersji 3.
Podczas renderowania KmlLayer
obowiązują ograniczenia dotyczące rozmiaru i złożoności. Więcej informacji znajdziesz w dokumentacji KmlLayer.
Poniższy przykład pokazuje, jak wczytać plik KML.
geoXml = new GGeoXml(
'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml');
map.addOverlay(geoXml);
var layer = new google.maps.KmlLayer(
'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml', {
preserveViewport: true
});
layer.setMap(map);
Warstwa ruchu
W wersji 3 możesz dodawać do map informacje o natężeniu ruchu w czasie rzeczywistym (jeśli są obsługiwane) za pomocą obiektu TrafficLayer
. W chwili wysyłania żądania wysyłane są informacje o ruchu. Oto przykłady informacji o ruchu drogowym w Los Angeles:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(34.0492459, -118.241043), 13);
map.setUIToDefault();
var trafficOptions = {incidents:false};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(34.0492459, -118.241043),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
W przeciwieństwie do wersji 2 nie ma żadnych opcji dla konstruktora TrafficLayer
w wersji 3. Incydenty są niedostępne w wersji 3.
Usługi
Geokodowanie
Interfejs Maps JavaScript API udostępnia obiekt geocoder
na potrzeby geokodowania adresów z danych wejściowych użytkownika. Jeśli chcesz określić geograficzne, znane adresy geograficzne, zapoznaj się z dokumentacją interfejsu Geocoding API.
Interfejs Geocoding API został znacznie ulepszony i ulepszony, dodając nowe funkcje i zmieniając sposób prezentowania danych.
GClientGeocoder
w interfejsie API v2 udostępnia 2 różne metody przekazywania danych do przodu i do tyłu, a także dodatkowe metody wpływające na skuteczność geokodowania. Z kolei obiekt Geocoder
w wersji 3 zawiera tylko metodę geocode()
, która przyjmuje literał obiektu zawierający warunki wejściowe (w postaci żądań geokodowania) i metodę wywołania zwrotnego. W zależności od tego, czy żądanie zawiera tekstowy atrybut address
czy obiekt LatLng
, interfejs Geocoding API zwraca odpowiedź w obu kierunkach. Wpływ na działanie geokodowania możesz wpływać na przekazywanie dodatkowych pól do żądania geokodowania:
- Dodanie tekstowego tagu
address
spowoduje uruchomienie geokodowania do przodu, co odpowiada wywołaniu metody getLatLng()
.
- Dodanie obiektu
latLng
wyzwala odwrotne geokodowanie, co odpowiada wywołaniu metody getLocations()
.
- Dodanie atrybutu
bounds
włącza uwzględnianie widocznego obszaru, co odpowiada wywołaniu metody setViewport()
.
- Włączenie atrybutu
region
powoduje zezwolenie na kod regionu, czyli odpowiednik metody setBaseCountryCode()
.
Odpowiedzi geokodowania w wersji 3 bardzo różnią się od odpowiedzi w wersji 2. Interfejs API w wersji 3 zastępuje zagnieżdżoną strukturę, która jest używana w wersji 2, bardziej łatwą do analizy strukturą. Co więcej, odpowiedzi w wersji 3 są bardziej szczegółowe: każdy wynik obejmuje kilka komponentów adresu, które lepiej określają rozdzielczość każdego wyniku.
Ten kod przyjmuje adres tekstowy i pokazuje pierwszy wynik z geokodowania:
var geocoder = new GClientGeocoder();
var infoPanel;
var map;
var AccuracyDescription = [
'Unknown accuracy', 'country level accuracy',
'region level accuracy', 'sub-region level accuracy',
'town level accuracy', 'post code level accuracy',
'street level accuracy', 'intersection level accuracy',
'address level accuracy', 'premise level accuracy',
];
function geocode_result_handler(response) {
if (!response || response.Status.code != 200) {
alert('Geocoding failed. ' + response.Status.code);
} else {
var bounds = new GLatLngBounds(new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.south,
response.Placemark[0].ExtendedData.LatLonBox.west
), new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.north,
response.Placemark[0].ExtendedData.LatLonBox.east
));
map.setCenter(bounds.getCenter(),
map.getBoundsZoomLevel(bounds));
var latlng = new GLatLng(
response.Placemark[0].Point.coordinates[1],
response.Placemark[0].Point.coordinates[0]);
infoPanel.innerHTML += '<p>1st result is <em>' +
// No info about location type
response.Placemark[0].address +
'</em> of <em>' +
AccuracyDescription[response.Placemark[0].
AddressDetails.Accuracy] +
'</em> at <tt>' + latlng + '</tt></p>';
var marker_title = response.Placemark[0].address +
' at ' + latlng;
map.clearOverlays();
var marker = marker = new GMarker(
latlng,
{'title': marker_title}
);
map.addOverlay(marker);
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
geocoder.getLocations(address, geocode_result_handler);
}
function initialize() {
map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(38, 15), 2);
map.setUIToDefault();
infoPanel = document.getElementById('info-panel');
}
var geocoder = new google.maps.Geocoder();
var infoPanel;
var map;
var marker;
function geocode_result_handler(result, status) {
if (status != google.maps.GeocoderStatus.OK) {
alert('Geocoding failed. ' + status);
} else {
map.fitBounds(result[0].geometry.viewport);
infoPanel.innerHTML += '<p>1st result for geocoding is <em>' +
result[0].geometry.location_type.toLowerCase() +
'</em> to <em>' +
result[0].formatted_address + '</em> of types <em>' +
result[0].types.join('</em>, <em>').replace(/_/, ' ') +
'</em> at <tt>' + result[0].geometry.location +
'</tt></p>';
var marker_title = result[0].formatted_address +
' at ' + latlng;
if (marker) {
marker.setPosition(result[0].geometry.location);
marker.setTitle(marker_title);
} else {
marker = new google.maps.Marker({
position: result[0].geometry.location,
title: marker_title,
map: map
});
}
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
geocoder.geocode({'address': address}, geocode_result_handler);
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(38, 15),
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID
});
infoPanel = document.getElementById('info-panel');
}
Trasa
Interfejs Maps JavaScript API w wersji 3 zastępuje klasę GDirections
z wersji 2 klasą DirectionsService
do obliczania wskazówek dojazdu.
Metoda route()
w wersji 3 zastępuje metody load()
i loadFromWaypoints()
z interfejsu API w wersji 2. Ta metoda przyjmuje pojedynczy literał obiektu DirectionsRequest
zawierający warunki wejściowe i metodę wywołania zwrotnego, które są wykonywane po otrzymaniu odpowiedzi. W tym literale obiektu mogą być dostępne opcje podobne do literału obiektu GDirectionsOptions
w wersji 2.
W interfejsie Maps JavaScript API w wersji 3 zadanie przesyłania żądań wskazówek dojazdu zostało odłączone od zadania renderowania żądań, które jest teraz obsługiwane w klasie DirectionsRenderer
. Obiekt DirectionsRenderer
możesz powiązać z dowolną mapą lub obiektem DirectionsResult
za pomocą metod setMap()
i setDirections()
. Renderer to MVCObject
, więc wykryje wszystkie zmiany w jego właściwościach i zaktualizuje mapę, gdy zmienią się powiązane wskazówki.
Poniższy kod pokazuje, jak poprosić o trasę dojazdu do określonej lokalizacji, używając ścieżek z adresu dla pieszych. Zauważ, że tylko wersja 3 może oferować wskazówki piesze na ścieżce w Dublinie, w zoo.
var map;
var directions;
var directionsPanel;
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsPanel = document.getElementById("route");
map = new GMap2(document.getElementById('map'));
map.setCenter(origin, 10);
map.setUIToDefault();
directions = new GDirections(map, directionsPanel);
directions.loadFromWaypoints(
[origin, destination], {
travelMode: 'G_TRAVEL_MODE_WALKING',
});
}
var map;
var directionsRenderer;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsRenderer = new google.maps.DirectionsRenderer();
map = new google.maps.Map(
document.getElementById('map'), {
center: origin,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsRenderer.setPanel(document.getElementById("route"));
directionsRenderer.setMap(map);
directionsService.route({
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.WALKING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
}
});
}
Street View
Google Street View udostępnia interaktywne widoki 360° miejsc, które znajdują się w ich zasięgu. Interfejs API w wersji 3 obsługuje natywną obsługę Street View w przeglądarce, w przeciwieństwie do wersji 2, która do wyświetlania zdjęć Street View wymaga wtyczki Flash®.
Obrazy Street View są obsługiwane za pomocą obiektu StreetViewPanorama
w wersji 3 lub obiektu GStreetviewPanorama
w wersji 2. Te zajęcia mają różne interfejsy, ale odgrywają taką samą rolę: łączą kontener div
ze zdjęciami Street View i pozwalają określić lokalizację oraz punkt początkowy (panoramę) Street View.
function initialize() {
var fenwayPark = new GLatLng(42.345573, -71.098326);
panoramaOptions = {
latlng: fenwayPark,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new GStreetviewPanorama(
document.getElementById('pano'),
panoramaOptions);
GEvent.addListener(myPano, "error", handleNoFlash);
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var panoramaOptions = {
position: fenway,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'),
panoramaOptions);
}
Bezpośredni dostęp do danych Street View można uzyskać za pomocą obiektu StreetViewService
w wersji 3 lub podobnego obiektu GStreetviewClient
w wersji 2. Oba interfejsy udostępniają podobne interfejsy do pobierania lub sprawdzania danych o Street View, umożliwiając wyszukiwanie według lokalizacji lub identyfikatora panoramicznego.
W wersji 3 funkcja Street View jest domyślnie włączona. Mapa pojawi się z ustawieniem Pegman Street View, a interfejs API ponownie użyje elementu div mapy do wyświetlenia widoków Street View. Poniższy kod pokazuje, jak emulować działanie wersji 2 przez rozdzielenie widoków Street View w elemencie div.
var marker;
var panoClient = new GStreetviewClient();
function initialize() {
if (GBrowserIsCompatible()) {
var myPano = new GStreetviewPanorama(
document.getElementById('pano'));
GEvent.addListener(myPano, 'error', handleNoFlash);
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(42.345573, -71.098326), 16);
map.setUIToDefault();
GEvent.addListener(map, 'click', function(overlay, latlng) {
if (marker) {
marker.setLatLng(latlng);
} else {
marker = new GMarker(latlng);
map.addOverlay(marker);
}
var nearestPano = panoClient.getNearestPanorama(
latlng, processSVData);
});
function processSVData(panoData) {
if (panoData.code != 200) {
alert("Panorama data not found for this location.");
}
var latlng = marker.getLatLng();
var dLat = latlng.latRadians()
- panoData.location.latlng.latRadians();
var dLon = latlng.lngRadians()
- panoData.location.latlng.lngRadians();
var y = Math.sin(dLon) * Math.cos(latlng.latRadians());
var x = Math.cos(panoData.location.latlng.latRadians()) *
Math.sin(latlng.latRadians()) -
Math.sin(panoData.location.latlng.latRadians()) *
Math.cos(latlng.latRadians()) * Math.cos(dLon);
var bearing = Math.atan2(y, x) * 180 / Math.PI;
myPano.setLocationAndPOV(panoData.location.latlng, {
yaw: bearing
});
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
}
}
// Load the API with libraries=geometry
var map;
var marker;
var panorama;
var sv = new google.maps.StreetViewService();
function radians(degrees) { return Math.PI * degrees / 180.0 };
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"));
map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(42.345573, -71.098326),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 16
});
google.maps.event.addListener(map, 'click', function(event) {
if (!marker) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
} else {
marker.setPosition(event.latLng);
}
sv.getPanoramaByLocation(event.latLng, 50, processSVData);
});
}
function processSVData(panoData, status) {
if (status == google.maps.StreetViewStatus.OK) {
alert("Panorama data not found for this location.");
}
var bearing = google.maps.geometry.spherical.computeHeading(
panoData.location.latLng, marker.getPosition());
panorama.setPano(panoData.location.pano);
panorama.setPov({
heading: bearing,
pitch: 0,
zoom: 1
});
panorama.setVisible(true);
marker.setMap(panorama);
}