Spisie treści
Mapy wygenerowane za pomocą Interfejs API JavaScript Map Google Nie zawsze będą statyczne, choć są one najczęściej używane do wizualizacji, nie zawsze tak jest, dlatego czasami będą sytuacje, w których będziemy musieli rozszerzyć ich zakres, aby mogły pokazać w nich dodatkowe informacje.Te dodatkowe informacje, które musimy uwzględnić, są osiągane dzięki wektor które są niczym innym jak kształtami składającymi się z punktów, gdzie wszystkie typy wektorów używane przez API Nazywają się nakładki lub nakładka.
RekomendacjeW poprzednich samouczkach widzieliśmy wprowadzenie do API, przejrzeliśmy najważniejsze opcje, dowiedzieliśmy się, jak uzyskać dane uwierzytelniające dla programistów Google i wykonujemy kilka prostych przykładów jego użycia, dlatego przed zapoznaniem się z treścią tego samouczka lub wykonaniem przykładów wymienionych tutaj, zalecamy zapoznanie się z tym samouczkiem.
Po przejściu zalecanego samouczka i w kontekście, przejdźmy do praktycznych przykładów, aby lepiej zrozumieć wykorzystanie wektorów w naszych mapach generowanych za pomocą API.
Korzystanie z map generowanych za pomocą API najczęściej koncentruje się na stronach internetowych, gdzie jego główną funkcją jest pokazanie lokalizacji firmy lub biznesu. Możemy to nazwać a punkt zainteresowania że możemy go bez problemu przedstawić za pomocą typu wektora, który dla celów Interfejs API JavaScript Map Google jest znany jako znacznik.
Bez zbędnych ceregieli zobaczmy kroki, które musimy wykonać, aby zaimplementować standardowy znacznik i dodatkowo niestandardowy na naszej mapie.
1- Pierwszą rzeczą, którą musimy zrobić, to uwzględnić API i stylów wizualizacji naszej mapy, ważne jest, aby pamiętać, że musimy użyć naszego Poświadczenia programisty Google dla poprawnego działania tego przykładu:
2- Definiujemy nasze zmienne globalne, tzw. mapę oraz szereg zmiennych, które wykorzystamy do wygenerowania losowych znaczników według współrzędnych otaczających obszar Madryt.:
mapa var; var minLat = 38, maxLat = 41, minLng = -3, maxLng = -9, markerId = 1;
3- Następnie definiujemy funkcję inicjalizacji naszej mapy, która będzie zawierała dla niej najważniejsze opcje jako zoom, typ bazy dla mapy i współrzędne środka które w tym przypadku będą tymi z Madryt, otrzymujemy ID div przez SŁOŃCE, inicjujemy mapę i definiujemy funkcję do obsługi zdarzeń, gdy umieszczamy znaczniki na mapie, spójrzmy na segment kodu, który właśnie opisaliśmy:
function initializeMap () {google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); mapa = nowa google.maps.Map (mapElement, mapOptions); wydarzeniaMarker (); } 4- Teraz musimy zbudować naszą funkcję wydarzeniaMarker () który będzie miał w swojej definicji dwa zdarzenia powiązane na kliknięcie zgodnie z identyfikatorem wciśniętym z dwóch różnych linków i który wywoła dwie dodatkowe funkcje, które będą odpowiedzialne za ustawianie zakładek:
functionMarkerEvents () {document.getElementById ('add_Marker'). addEventListener ('klik', funkcja () {addMarker ();}); document.getElementById ('add_person_Marker'). addEventListener ('klik', funkcja () {addPersonMarker ();}); } 5- Przed skonstruowaniem dwóch funkcji, które będą ustawiać znaczniki, należy popracować nad współrzędnymi, tak aby dostarczały nam losowe wartości z tego zakresu i mogły być zinterpretowane przez Interfejs API JavaScript Map Google, zrobimy to za pomocą kilku operacji arytmetycznych na zmiennych globalnych współrzędnych, zobaczmy odpowiednią funkcję:
function createLaLgRandom () {var deltaLat = maxLat - minLat; var deltaLng = maxLng - minLng; var rndNumLat = Math.losowo (); var nowyLat = minLat + rndNumLat * deltaLat; var rndNumLng = Math.losowo (); var nowaLng = minLng + rndNumLng * deltaLng; zwróć nowe google.maps.LatLng (newLat, newLng); } 6- Po wykonaniu tej czynności możemy zbudować nasze funkcje, aby naprawić znaczniki na naszej mapie, w tym celu robimy to za pomocą metody Znacznik Aby wygenerować standardowy znacznik i poprzednią funkcją generujemy losową współrzędną, w której będzie wyświetlany:
function addMarker () {zmienna współrzędna = createLgRandom (); var marker = new google.maps.Marker ({pozycja: współrzędna, mapa: mapa, tytuł: 'Random Marker -' + markerId}); znacznikId ++; } Zanim przejdziemy do naszego niestandardowa zakładka Należy wspomnieć, że opiera się on na ikonach i te muszą być dostępne w katalogu naszego projektu, do tego ćwiczenia użyto niektórych darmowych ikon dostępnych na stronie mapikonów w ramach kategorii markery, aby działały dla nas bez problemu, w tym celu pobieramy niektóre i umieszczamy je w folderze o nazwie obrazek znajduje się u podstaw naszego projektu, jak widać na poniższym obrazku:
POWIĘKSZAĆ
function addPersonMarker () {var markerIcons = ['komiksy', 'gry wideo', 'komputery', 'hotfood', 'rower_rising']; var rndMarkerId = Math.floor (Math.random () * markerIcons.length); var współrzędna = utwórzLaLgRandom (); var marker = new google.maps.Marker ({pozycja: współrzędne, mapa: mapa, ikona: 'img /' + markerIcons [rndMarkerId] + '.png.webp', tytuł: 'Random Marker -' + markerId}); znacznikId ++; } 8- Na koniec dodajemy zdarzenie, aby zainicjować naszą mapę i tworzymy dwa linki przed naszym div z identyfikatorami, które definiujemy dla naszych zdarzeń, które będą wywoływać odpowiednie funkcje:
google.maps.event.addDomListener (okno, 'load', initializeMap); Dodaj zakładki
Dodaj zakładkę | Dodaj niestandardową zakładkę
Dzięki temu mamy już naszą mapę z funkcją dodawania standardowe markery Tak zwyczaj W zależności od tego, co wybierzemy, należy wspomnieć, że możemy dodać tyle zakładek, ile chcemy, pozwoli nam to zobaczyć działanie API, na koniec zobaczmy, jak to wygląda po uruchomieniu w naszej przeglądarce:
POWIĘKSZAĆ
1- Zamierzamy stworzyć nowy plik add_popup.html i użyjemy poprzedniego przykładu jako podstawy do wstawienia nowych funkcjonalności, w tym celu kopiujemy i wklejamy kod naszej mapy i zamierzamy zlokalizować funkcję zainicjowaćMapę () gdzie po uzyskaniu identyfikatora zdefiniujemy popup dla środka naszej mapy metodą InfoWindow, zobaczmy kod do w/w funkcjonalności:
var infowindow = nowe google.maps.InfoWindow ({content: 'Treść wyskakująca:
To wyskakujące okienko pokazuje środek mapy, czyli Madryt', pozycja: nowy google.maps.LatLng (40.41678, -3.70379)}); infowindow.open (mapa); 2- Teraz zmodyfikujemy naszą funkcję addMarker () aby dodać wyskakujące okienko do każdego znacznika, który pojawia się na naszej mapie, w tym celu ponownie użyjemy funkcji Okno informacji () i dodamy zdarzenie dla zmiennej, którą definiujemy instancją metody, zobaczmy:
function addMarker () {zmienna współrzędna = createLgRandom (); var marker = new google.maps.Marker ({pozycja: współrzędna, mapa: mapa, tytuł: 'Random Marker -' + markerId}); var infowindow = new google.maps.InfoWindow ({content: 'Okno informacyjne znacznika - identyfikator:' + znacznikId}); google.maps.event.addListener (znacznik, 'klik', funkcja () {infowindow.open (mapa, znacznik);}); znacznikId ++; } 3- Gdy to zrobisz, zobaczmy, jak wygląda nasza mapa z funkcjonalnością wyskakującego okienka, które właśnie dodaliśmy:
POWIĘKSZAĆ
POWIĘKSZAĆ
Przetestowaliśmy już moc wektorów, pokazując interesujące punkty na mapie za pomocą markeryMożemy jednak użyć wektorów do narysowania linii i pokazania trasy między dwoma punktami na naszej mapie, zobaczmy, jak to zrobimy:
1- Zamierzamy stworzyć plik o nazwie add_line.html i dołączymy nasze API, a także style z pierwszego przykładu, teraz zdefiniujemy współrzędne, które wychodzą z Madryt do Barcelona, Zobaczmy:
var współrzędne Linia = [[40.41678, -3.70379], [41.4080,2.2293], [40.42697, -3.71379], [41.3974,2.2033], [40.40700, -3.71340], [41.3980,2.2133], [40.42772, -3.71379] , [41.3833,2.1833]];
2- Zanim przejdziemy do funkcji inicjalizacji naszej mapy, najpierw utworzymy funkcję addLine () gdzie pierwszą rzeczą, którą zrobimy, jest iteracja po tablicy współrzędnych i utworzenie nowej tablicy, która będzie zawierać obiekt typu LatLng, Zobaczmy:
function addLine () {var pointCount = coordinateLine.length; var ścieżka linii = []; for (var i = 0; i <pointCount; i ++) {var tempLatLng = new google.maps.LatLng (coordinateLine [i] [0], coordinateLine [i] [1]); linePath.push (tempLatLng); } 3- Następnie ustawiamy właściwości naszej linii, takie jak kolor, krycie i grubość. Po wykonaniu tej czynności wystarczy wysłać do metody Polilinia opcje jako parametr i ustaw zmienną polilinii na bieżącą mapę:
var lineOptions = {path: linePath, strokeWeight: 7, strokeColor: '# 313cac', strokeOpacity: 0,8} var polyline = new google.maps.Polyline (lineOptions); polyline.setMap (mapa); } 4- Wreszcie tworzymy naszą dobrze znaną funkcję zainicjowaćMapę () i zamiast mieć na końcu funkcję o nazwie MarkerEvents, zastąpimy ten wiersz nazwą naszej funkcji addLine (), tworzymy nasz kod HTML i uruchamiamy go w naszej przeglądarce, powinno to wyglądać tak:
POWIĘKSZAĆ
Może to brzmieć dość skomplikowanie, ale tak nie jest, z pomocą klas i metod API Możemy to rozwiązać kilkoma linijkami kodu, zobaczmy, jak to zrobimy:
1- Pierwszą rzeczą jest uwzględnienie naszego API, nasze style i definiujemy nasze zmienne globalne, używamy tych samych współrzędnych z poprzedniego przykładu, aby użyć tej samej ścieżki, dodatkowo definiujemy zmienną polilinia jako globalny, aby móc z niego korzystać w pełnym zakresie naszego JavaScript:
mapa var; var polilinia; var współrzędne Linia = [[40.41678, -3.70379], [41.4080,2.2293], [40.42697, -3.71379], [41.3974,2.2033], [40.40700, -3.71340], [41.3980,2.2133], [40.42772, -3.71379] , [41.3833,2.1833]];
2- Teraz tworzymy naszą funkcję addAnimowanaLinia () który będzie miał podobną strukturę do funkcji addLine () Jednak z poprzedniego przykładu ta funkcja będzie miała definicję symbolu, którego użyjemy do pokazania poruszającego się obiektu między tymi dwoma punktami, w tym przypadku użyjemy strzałki:
var arrowSymbol = {strokeColor: '# 000', skala: 3, ścieżka: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}; 3- Na koniec musimy tylko ustawić tę zmienną na opcję ikony z definicji linii:
var lineOptions = {ścieżka: linePath, icons: [{icon: symbol strzałki}], strokeWeight: 3, strokeColor: '# 313cac', strokeOpacity: 0,8} 4- Po wykonaniu tej czynności wystarczy animować naszą ikonę i robimy to w funkcji o nazwie animowaćStrzałka () które musimy zawrzeć na końcu definicji funkcji addAnimowanaLinia () Zobaczmy, co zawiera funkcja:
function animateArrow () {licznik var = 0; var accessVar = window.setInterval (function () {counter = (licznik + 1)% 100; var arrows = polyline.get ('ikony'); arrows [0] .offset = (licznik / 2) + '%'; polyline.set ('ikony', strzałki);}, 50); } 5- Aby zakończyć, inicjujemy naszą mapę, jaką już znamy i wywołujemy naszą funkcję addAnimowanaLinia ()Zobaczmy, jak to wygląda w naszej przeglądarce, należy wspomnieć, że strzałka ma efekt przemieszczania się z punktu do punktu:
POWIĘKSZAĆ
