Spisie treści
Usługi oferowane przez Interfejs API JavaScript Map Google są tak różnorodne, jak funkcjonalne, mają wyróżniającą jakość Mapy Google W porównaniu z konkurencją usługi te zazwyczaj działają asynchronicznie, co pozwala na skierowanie żądania do serwera zewnętrznego, a za przetwarzanie odpowiedzi odpowiada metoda typu wywołania zwrotnego.Jedną z mocnych stron tych usług jest to, że są w pełni kompatybilne z klasami i obiektami API. Możemy od konsultowania adresu konkretnego punktu na naszej mapie, aż po wdrożenie widoku ulicy.
Zanim przejdziemy do przykładów, zobaczmy kilka najważniejszych usług, z których będziemy korzystać w tym samouczku.
Kodowanie geograficzneUsługa ta pozwala nam na przekształcenie wspólnych adresów na współrzędne geograficzne w oparciu o szerokość i długość geograficzną punktu, pozwala to na umieszczanie znaczników lub pozycjonowanie naszej mapy, aby wykonać te operacje API udostępnia klasę o nazwie geokoder ().
Macierz odległościTa usługa pomaga nam obliczyć odległość i czas trwania trasy między wieloma punktami, co jest dziś szeroko stosowane, w tym celu mamy google.maps.DistanceMatrixService i związane z nim metody.
Widok ulicyUsługa Widok ulicy lub Street View oferuje nam panoramiczne widoki 360 stopni w obszarach, w których ma zasięg, co sprawi, że nasze mapy będą się bez wątpienia wyróżniać.
Pamiętaj, że tutaj szczegółowo opisałem działanie interfejsu API i obsługi zdarzeń w Mapach Google oraz Wprowadzenie, aby zrozumieć interfejs API JavaScript w Mapach Google.
Do realizacji tego przykładu będziemy korzystać z usługi geokoder () Ale jak wspomnieliśmy, pozwala nam to przekształcić adres we współrzędne, to jest w porządku, ale dla zwykłego użytkownika jest to coś, co nie widzi w tym wiele zastosowania, dlatego użyjemy odwrotny geokoder aby uzyskać potrzebny nam adres jednym kliknięciem. Zobaczmy kroki, które musimy wykonać:
1- Po pierwsze, jak już wiemy, dołączamy API, nie zapominając o użyciu naszych poświadczeń, oprócz tego dołączymy bibliotekę rysunek co pozwoli nam zaimplementować funkcjonalność rysowania znaczników, łączymy tę bibliotekę z naszymi danymi uwierzytelniającymi za pomocą symbolu &, jak zobaczymy poniżej:
2- Nie możemy zapomnieć o stylach dla mapy, które nadadzą jej rodzaj wizualizacji na stronie, a także zdefiniowaniu zmiennych globalnych, które będą miały zasięg globalny we wszystkich metodach naszego kodu:
mapa var; var geokoder var popup;
3- Następnie definiujemy naszą metodę zainicjowaćMapę () gdzie pierwszą rzeczą, którą zrobimy, jest zadeklarowanie naszego obiektu typu geokoder pomagając nam z klasy Geokoder () i z Okno informacji obiekt dla wyskakującego okienka, które wyświetli adres na ekranie:
function initializeMap () {geocoder = new google.maps.Geocoder (); popup = nowy google.maps.InfoWindow (); 4- Uwzględniamy konwencjonalne opcje mapy takie jak środek, powiększenie i rodzaj bazy, uzyskujemy element SŁOŃCE i tworzymy instancję metody Mapa:
google.maps.visualRefresh = prawda; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); mapa = nowa google.maps.Map (mapElement, mapOptions); 5- Teraz tworzymy menedżera rysunków, który pozwoli nam rysować markery, w tym celu utworzymy instancję Menedżer rysunków, uwidaczniamy to w interfejsie użytkownika i wybieramy, które tryby będą wyświetlane w kontrolce i w jakiej pozycji będą:
var drawingManager = new google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}}); 6- Teraz włączamy nowo utworzoną funkcjonalność, dodajemy słuchacza do naszego wydarzenia i do występu odwrotny geokoder Pozycję w szerokości i długości geograficznej naszego znacznika uzyskujemy metodą pobierzPozycję ():
drawingManager.setMap (mapa); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) {var markerPosition = marker.getPosition (); 7- W celu uzupełnienia odwrotny geokoder skorzystamy z usługi geokod () i zrobimy warunek, aby sprawdzić, czy usługa zwraca poprawną odpowiedź, jeśli nie, obsłużymy ją, aby użytkownik wiedział, że się nie powiodła i jeśli wynik jest poprawny, wywołujemy naszą metodę Pokaż adres ():
geocoder.geocode ({'latLng': markerPosition}, function (wyniki, status) {if (status == google.maps.GeocoderStatus.OK) {if (wyniki) {ShowAddress (wyniki [0], znacznik);}} else {alert („Usługa nie powiodła się:” + status);}}); 8- Na koniec pozostaje nam tylko zbudować metodę Pokaż adres () który otrzyma wynik naszego odwrotnego geokodera i pozycję znacznika, dzięki temu możemy bez problemu ustalić środek i wyświetlić informacje o sformatowanym adresie:
funkcja ShowAddress (wynik, znacznik) {map.setCenter (marker.getPosition ()); mapa.setZoom (13); var popupContent = 'Adres: '+ wynik.formatowany_adres; popup.setContent (popupContent); popup.open (mapa, znacznik); } 9- Zamykamy odpowiednie tagi i dodajemy fragment kodu HTML, aby uzupełnić nasz przykład:
Znajdź adres na mapie jednym kliknięciem
10- Wykonujemy w naszej przeglądarce i klikamy w dowolny punkt na naszej mapie i otrzymamy adres wyświetlany w wyskakującym okienku, który deklarujemy, powinien wyglądać następująco:
POWIĘKSZAĆ
ten Interfejs API JavaScript Map Google świadczy nam całkiem przydatne usługi, jedną z nich jest macierz odległości co pozwala nam obliczyć odległość i czas między wieloma punktami, funkcjonalność, którą możemy wykorzystać do wdrożenia różnych rozwiązań w każdym biznesie, od obliczania czasu dostawy lub wyznaczania najbardziej optymalnej trasy między różnymi punktami. Zobaczmy kroki, które musimy wykonać, aby zaimplementować tę funkcjonalność między naszymi mapami.
1- Dołączamy nasze API wraz z biblioteką rysunek, a także style wyświetlania naszej mapy i kontenera naszej matrycy:
2- Definiujemy zmienne globalne do wykorzystania w całym zakresie naszego kodu i w funkcji zainicjowaćMapę () Inicjujemy tablice do obsługi szerokości i długości geograficznej zarówno początku, jak i celu:
mapa var; var pochodzenieLatLon; var celLatLon; var odległośćMatrixService; var liczba znaczników; var arrayResult; funkcja initializeMap () {originLatLon = []; celLatLon = []; 3- Następnie w tej samej funkcji uzyskujemy dla niego przycisk i obsługę zdarzeń, dodatkowo inicjujemy obiekt do obsługi DistanceMatrixService a także licznik dla znaczników i przypisz wynik tablicy do div kontenera:
var generateBtnMatrix = document.getElementById ('generateMatrix'); generateBtnMatrix.addEventListener ('klik', funkcja () {MatrixRequest ();}); distanceMatrixService = nowy google.maps.DistanceMatrixService (); liczba znaczników = 0; tablica wyników = document.getElementById ('tablica wyników'); 4- Uwzględniamy konwencjonalne opcje mapy takie jak środek, powiększenie i rodzaj bazy, uzyskujemy element SŁOŃCE i tworzymy instancję metody Mapa:
google.maps.visualRefresh = prawda; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); mapa = nowa google.maps.Map (mapElement, mapOptions); 5- Podobnie jak w poprzednim ćwiczeniu stworzyliśmy menedżera rysunków, który pozwoli nam rysować markery, do tego stworzymy instancję Menedżer rysunków a my zapewniamy niezbędne opcje, włączamy i dodajemy słuchacza dla zdarzenia:
var drawingManager = new google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}}); drawingManager.setMap (mapa); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) { 6- Następnie przeprowadzamy walidacje, aby ograniczyć liczbę dozwolonych miejsc docelowych i ustawić ikony, których będziemy używać dla naszych zakładek:
liczba znaczników ++; if (markerCount> 10) {alert ("Większe miejsca docelowe nie są dozwolone"); drawingManager.setMap (null); marker.setMap (null); powrót; } if (markerCount% 2 === 0) {destinationLatLon.push (marker.getPosition ()); marker.setIcon ('img / comics.png.webp'); } else {originLatLon.push (marker.getPosition ()); marker.setIcon ('img / gry wideo.png.webp'); }}); 7- Teraz pozostaje nam tylko stworzyć nasze funkcje do obsługi zgłoszeń kierowanych do serwisu odległośćMatrixService, najpierw tworzymy tę, która przygotuje właściwość żądania:
functionMatrixRequest () {distanceMatrixService.getDistanceMatrix ({źródła: LatinSource, miejsca docelowe: LatinDestiny, travelMode: google.maps.TravelMode.DRIVING,}, getMatrixResult); } 8- Tworzymy funkcję dla callbacku, która pozwoli nam uzyskać odpowiedź serwisu i w której zawrzemy niezbędne walidacje na wypadek, gdyby serwis nie poradził sobie z błędem w najlepszy sposób:
funkcja getResultMatrix (wynik, status) {resultMatrix.innerHTML = ''; if (status == google.maps.DistanceMatrixStatus.OK) {var originAddresses = wynik.originAddresses; var DestinationAddresses = wynik.adresy docelowe; for (var i = 0, l = originAddresses.length; i <l; i ++) {zmienna elementy = wynik.wiersze [i] .elementy; for (var j = 0, m = elementy.length; j <m; j ++) {var adres_początkowy = adres_początkowy [i]; var adres_docelowy = adres_docelowy [j]; var element = elementy [j]; var odległość = element.odległość.tekst; var czas trwania = element.czas trwania.tekst; resultsDivMatrix (originAddress, destinationAddress, odległość, czas trwania, i, j); }}} else {alert ('Nie można uzyskać tablicy:' + status); } 9- Dodatkowo tworzymy funkcję, która zapisze uzyskane wyniki w odpowiednim div:
functionDivMatrixResults (originAddress, destinationAddress, odległość, czas trwania, originAddressCount, destinationAddressCount) {var existingContent = resultResult.innerHTML; var newTreść; nowazawartość = 'Pochodzenie '+ countLetters (originAddressCount) +':
'; nowaTreść + = adres_początkowy + '
'; nowa zawartość + = 'Miejsce docelowe '+ countLetters (destinationAddressCount) +':
'; nowazawartość + = adres docelowy + '
'; nowa zawartość + = 'Przeznaczenie: „+ odległość +”
'; nowa zawartość + = 'Przeznaczenie: „+ czas trwania +”
'; nowa zawartość + = '
'; resultArray.innerHTML = existingContent + newContent; } 9- Wreszcie w naszym JavaScript Liczniki obsługujemy w funkcji zwracającej nazwę odpowiadającą licznikowi umieszczanego przez nas znacznika:
function countLetters (count) {switch (count) {case 0: return 'Sklep z komiksami'; sprawa 1: zwróć „Sklep z grami wideo”; sprawa 2: zwrot „Sklep z komiksami”; sprawa 3: zwróć „Sklep z komiksami”; przypadek 4: zwróć „Sklep z grami wideo”; domyślnie: return null; }} 10- Zamykamy odpowiednie tagi i dodajemy fragment kodu HTML aby uzupełnić nasz przykład:
Użyj macierzy odległości
11- Wykonujemy nasz przykład w przeglądarce i aby zwizualizować działanie naszej mapy umieścimy 4 ciekawe miejsca i wciśniemy przycisk Generuj macierz odległości:
POWIĘKSZAĆ
Aby zakończyć ten samouczek, zaimplementujemy usługę Widok ulicy, Jest to dość prosty przykład, ale dodany do innych dostępnych usług sprawi, że nasze mapy będą wyróżniać się na tle innych, zobaczmy, co musimy zrobić, aby zaimplementować tę usługę:
1- Dołączamy API i definiujemy odpowiednie style, w tym przykładzie nie użyjemy biblioteki rysunków, więc nie zostanie ona uwzględniona:
2- Definiujemy nasze zmienne globalne i tworzymy naszą funkcję zainicjowaćMapę () Za pomocą konwencjonalnych opcji, środka naszej mapy, powiększenia i rodzaju bazy uzyskujemy element SŁOŃCE i tworzymy instancję metody Mapa:
mapa var; geokoder var; var StreetView; function initializeMap () {popup = new google.maps.InfoWindow (); geokoder = nowy google.maps.Geocoder (); google.maps.visualRefresh = prawda; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); mapa = nowa google.maps.Map (mapElement, mapOptions); 3- W ramach naszej funkcji nazywamy obsługę Widok ulicy a następnie tworzymy funkcję, aby ustawić jej opcje takie jak lokalizacja i punkt widzenia:
streetView = map.getStreetView (); } funkcja setOptionsStreetView (lokalizacja) {streetView.setPosition (lokalizacja); streetView.setPov ({nagłówek: 0, swędzenie: 10}); } 4- Na koniec tworzymy funkcje, aby móc przełączać się między konwencjonalnym widokiem mapy a Widok ulicy, zobaczmy, jak one wyglądają:
funkcja showMap () {streetView.setVisible (false); } funkcja showStreetView () {setStreetViewOptions (map.getCenter ()); streetView.setVisible (prawda); } 5- Zamykamy odpowiednie tagi i dodajemy fragment kodu HTML aby uzupełnić nasz przykład:
Mapa ze Street View
6- Uruchamiamy nasz przykład w przeglądarce i naciskamy przycisk Pokaż widok ulicy aby zwizualizować funkcjonalność, jak widać na poniższym obrazku:
POWIĘKSZAĆ
Na tym kończymy ten samouczek, ponieważ byliśmy w stanie docenić usługi obecne w Interfejs API JavaScript Map Google Pozwalają nam znacznie rozszerzyć funkcjonalność naszych map, pozycjonując je jako opcję do uwzględnienia we wdrażanych przez nas systemach, które wymagają obliczania lokalizacji i czasu i/lub odległości.
Przypominam o tym samouczku, który również się przyda: Naucz się korzystać z wektorów w Google MapsPodobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt
