Servicii Google Maps

Serviciile oferite de API Google Maps Javascript sunt la fel de variate pe cât de funcționale, au o calitate care diferențiază Hărți Google De la concurenții lor, aceste servicii funcționează, în general, asincron, ceea ce permite solicitarea către un server extern și o metodă de tip callback este responsabilă de procesarea răspunsurilor.
Unul dintre punctele forte ale acestor servicii este că sunt pe deplin compatibile cu clasele și obiectele API. Putem de la consultarea adresei unui anumit punct de pe harta noastră până la implementarea vizualizării străzii.
Înainte de a trece la exemple, să vedem câteva dintre cele mai importante servicii pe care le vom folosi în acest tutorial.
Geo codificareAcest serviciu ne permite să transformăm adresele comune în coordonate geografice pe baza latitudinii și longitudinii unui punct, acest lucru ne permite să plasăm markeri sau să ne poziționăm harta, pentru a efectua aceste operații API oferă o clasă numită geocoder ().
Matricea distanțeiAcest serviciu ne ajută să calculăm distanța și durata rutei între mai multe puncte, lucru care este utilizat pe scară largă astăzi, pentru aceasta avem scopul de a google.maps.DistanceMatrixService și metodele sale asociate.
Vedere de stradaServiciu Vedere de strada sau street view ne oferă vederi panoramice la 360 de grade în zonele în care are acoperire, lucru care va face ca hărțile noastre să iasă în evidență fără îndoială.
Amintiți-vă că aici am detaliat funcționarea API-ului și gestionarea evenimentelor în Google Maps și Introducere pentru a înțelege API-ul Javascript în Google Maps.
Pentru a realiza acest exemplu vom folosi serviciul geocoder () Dar așa cum am menționat, acest lucru ne permite să transformăm o adresă într-o coordonată, este în regulă, dar pentru utilizatorul convențional este ceva care nu vede prea multă utilizare, de aceea vom folosi geocoder invers pentru a obține adresa de care avem nevoie cu un singur clic. Să vedem pașii pe care trebuie să-i urmăm:
1- În primul rând, așa cum știm deja, includem API-ul, fără a uita să ne folosim acreditările, în plus, vom include biblioteca de desen care ne va permite să implementăm funcționalitatea markerilor de desen, concatenăm această bibliotecă la acreditarea noastră cu simbolul & așa cum vom vedea mai jos:

2- Nu putem uita de stilurile pentru hartă, care îi vor oferi tipul de vizualizare pe pagină, precum și definirea variabilelor globale care vor avea un domeniu global în toate metodele codului nostru:

 harta var; var geocoder var popup; 

3- După aceasta ne definim metoda initializeMap () unde primul lucru pe care îl vom face este să ne declarăm obiectul de tip geocoder ajutându-ne din clasă Geocoder () si cu InfoWindow obiectul pentru fereastra pop-up care va afișa adresa pe ecran:

 funcția initializeMap () {geocoder = new google.maps.Geocoder (); popup = new google.maps.InfoWindow (); 

4- Includem opțiunile convenționale ale hărții, cum ar fi centrul, zoomul și tipul de bază, obținem elementul SOARE și instanțiem metoda Hartă:

 google.maps.visualRefresh = adevărat; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 

5- Acum creăm managerul de desen care ne va permite să desenăm markeri, pentru aceasta vom face o instanță DrawingManager, îl facem vizibil în interfața cu utilizatorul și selectăm ce moduri vor fi afișate în control și în ce poziție vor fi:

 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- Acum activăm funcționalitatea nou creată, adăugăm ascultătorul pentru evenimentul nostru și pentru a efectua geocoder invers obținem poziția în latitudine și longitudine a markerului nostru cu metoda getPosition ():

 drawingManager.setMap (hartă); google.maps.event.addListener (drawingManager, 'markercomplete', funcție (marker) {var markerPosition = marker.getPosition (); 

7- Pentru a finaliza geocoder invers vom folosi serviciul de geocod () și vom face o condiționare pentru a verifica dacă serviciul returnează un răspuns valid, dacă nu, îl gestionăm, astfel încât utilizatorul să știe că a eșuat și dacă rezultatul este corect, apelăm metoda noastră Afișați adresa ():

 geocoder.geocode ({'latLng': markerPosition}, funcție (rezultate, stare) {if (status == google.maps.GeocoderStatus.OK) {if (rezultate) {ShowAddress (rezultate [0], marker);}} else {alert ("Serviciul a eșuat:" + starea);}}); 

8- În cele din urmă, nu trebuie decât să construim metoda Afișați adresa () care va primi rezultatul geocoderului nostru invers și poziția markerului, cu aceasta putem stabili centrul și afișa informațiile adresei formatate fără nicio problemă:

 funcția ShowAddress (rezultat, marker) {map.setCenter (marker.getPosition ()); map.setZoom (13); var popupContent = 'Abordare:  '+ result.formatted_address; popup.setContent (popupContent); popup.open (hartă, marker); } 

9- Închidem etichetele corespunzătoare și adăugăm porțiunea codului HTML pentru a completa exemplul nostru:

 Găsiți adresa pe hartă cu un singur clic

10- Executăm în browserul nostru și facem clic pe orice punct de pe harta noastră și vom obține adresa afișată în fereastra pop-up pe care o declarăm, ar trebui să arate după cum urmează:

MARI

Această funcționalitate poate fi aplicată oricărui punct de pe harta noastră, trebuie doar să ne deplasăm și să selectăm un alt punct.
API Google Maps Javascript ne oferă servicii destul de utile, unul dintre ele este matricea distanței ceea ce ne permite să calculăm distanța și timpul dintre mai multe puncte, o funcționalitate pe care o putem folosi pentru a implementa diferite soluții în orice afacere, de la calcularea timpilor de livrare sau stabilirea celui mai optim traseu între diferite puncte. Să vedem pașii pe care trebuie să-i urmăm pentru a implementa această funcționalitate între hărțile noastre.
1- Includem API-ul nostru împreună cu biblioteca desen, precum și stilurile pentru afișarea hărții noastre și a containerului matricei noastre:

2- Definim variabile globale pentru utilizare în întregul domeniu al codului nostru și în funcție initializeMap () Inițializăm matricele pentru a gestiona latitudinea și longitudinea atât a originii, cât și a destinației:

 harta var; var originLatLon; var destinationLatLon; var distanceMatrixService; var markerCount; var arrayResult; funcția initializeMap () {originLatLon = []; destinationLatLon = []; 

3- Apoi, în aceeași funcție, obținem butonul și gestionatorul de evenimente pentru acesta, în plus, inițializăm obiectul pentru serviciul de DistanceMatrixService precum și contorul pentru markere și atribuiți rezultatul matricei unui container div:

 var generateBtnMatrix = document.getElementById ('generateMatrix'); generateBtnMatrix.addEventListener ('click', function () {MatrixRequest ();}); distanceMatrixService = new google.maps.DistanceMatrixService (); markerCount = 0; matrice de rezultate = document.getElementById ('matrice de rezultate'); 

4- Includem opțiunile convenționale ale hărții, cum ar fi centrul, zoomul și tipul de bază, obținem elementul SOARE și instanțiem metoda Hartă:

 google.maps.visualRefresh = adevărat; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 

5- La fel ca în exercițiul anterior am creat managerul de desen care ne va permite să desenăm markeri, pentru aceasta vom face o instanță DrawingManager și oferim opțiunile necesare, îl activăm și adăugăm ascultătorul pentru eveniment:

 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 (hartă); google.maps.event.addListener (drawingManager, 'markercomplete', funcție (marker) { 

6- După aceasta, efectuăm validările pentru a limita numărul de destinații permise și setăm pictogramele pe care le vom folosi pentru marcajele noastre:

 markerCount ++; if (markerCount> 10) {alert („Nu mai sunt permise destinații”); drawingManager.setMap (nul); marker.setMap (nul); întoarcere; } if (markerCount% 2 === 0) {destinationLatLon.push (marker.getPosition ()); marker.setIcon ('img / comics.png.webp'); } else {originLatLon.push (marker.getPosition ()); marker.setIcon ('img / videogames.png.webp'); }}); 

7- Acum trebuie doar să ne creăm funcțiile pentru a face față solicitărilor făcute serviciului distanceMatrixService, mai întâi îl creăm pe cel care va pregăti proprietatea cererii:

 functionMatrixRequest () {distanceMatrixService.getDistanceMatrix ({origini: LatinSource, destinații: LatinDestiny, travelMode: google.maps.TravelMode.DRIVING,}, getMatrixResult); } 

8- Creăm funcția pentru apelare și care ne va permite să obținem răspunsul serviciului și în care vom include validările necesare în cazul în care serviciul nu reușește să gestioneze eroarea în cel mai bun mod:

 funcția getResultMatrix (rezultat, stare) {resultMatrix.innerHTML = ''; if (status == google.maps.DistanceMatrixStatus.OK) {var origineAdrese = rezultat.origenAdrese; var destinationAddresses = result.destinationAddresses; for (var i = 0, l = originAddresses.length; i <l; i ++) {var elements = result.rows [i] .elements; for (var j = 0, m = elements.length; j <m; j ++) {var origineAdresa = origineAdrese [i]; var destinationAddress = destinationAddresses [j]; var element = elements [j]; var distance = element.distance.text; var duration = element.duration.text; resultsDivMatrix (origineAdresă, destinațieAdresă, distanță, durată, i, j); }}} else {alert ('Nu s-a putut obține matricea:' + starea); } 

9- În plus, creăm funcția care va scrie rezultatele obținute în divul corespunzător:

 functionDivMatrixResults (originAddress, destinationAddress, distance, duration, originAddressCount, destinationAddressCount) {var existingContent = resultResult.innerHTML; var newContent; newContent = 'Originea '+ countLetters (originAddressCount) +':
'; newContent + = originAddress + '
'; newContent + = 'Destinație '+ countLetters (destinationAddressCount) +':
'; newContent + = destinationAddress + '
'; newContent + = 'Destin:  „+ distanță +”
'; newContent + = 'Destin:  „+ durata +”
'; newContent + = '
'; resultArray.innerHTML = existingContent + newContent; } 

9- În cele din urmă în Javascript Manevrăm contoare într-o funcție pentru a returna numele corespunzător contorului marcatorului pe care îl plasăm:

 function countLetters (count) {switch (count) {case 0: return 'Comics Store'; cazul 1: returnează „Magazin de jocuri video”; cazul 2: returnează „Magazin de benzi desenate”; caz 3: returnează „Magazin de benzi desenate”; cazul 4: returnează „Magazin de jocuri video”; implicit: return nul; }} 

10- Închidem etichetele corespunzătoare și adăugăm porțiunea de cod HTML pentru a completa exemplul nostru:

Utilizați matricea de distanță

11- Executăm exemplul nostru în browser și pentru a vizualiza funcționarea hărții noastre, vom plasa 4 puncte de interes și vom apăsa butonul Generați Matricea Distanței:

MARI

După cum putem vedea în imaginea noastră, avem patru puncte pe harta noastră unde matricea distanței ne permite să calculăm distanța și timpul dintre fiecare dintre ele.
Pentru a finaliza acest tutorial vom implementa serviciul Vedere de strada, Este un exemplu destul de simplu, dar care, adăugat la celelalte servicii disponibile, va face ca hărțile noastre să iasă în evidență deasupra celorlalte, să vedem ce trebuie să facem pentru a implementa acest serviciu:
1- Includem API-ul și definim stilurile corespunzătoare, în acest exemplu nu vom folosi biblioteca de desene, deci nu va fi inclusă:

2- Ne definim variabilele globale și ne creăm funcția initializeMap () Cu opțiunile convenționale, centrul hărții noastre, zoom și tipul bazei, obținem elementul SOARE și instanțiem metoda Hartă:

 harta var; var geocoder; var streetView; funcția initializeMap () {popup = new google.maps.InfoWindow (); geocoder = new google.maps.Geocoder (); google.maps.visualRefresh = adevărat; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 

3- În cadrul funcției noastre numim serviciul Vedere de strada și după aceasta creăm o funcție pentru a seta opțiunile sale, cum ar fi locația și punctul de vedere:

 streetView = map.getStreetView (); } function setOptionsStreetView (location) {streetView.setPosition (location); streetView.setPov ({titlu: 0, mâncărime: 10}); } 

4- În cele din urmă, creăm funcțiile pentru a putea comuta între vizualizarea convențională a hărții și Streer View, să vedem cum arată acestea:

 funcția showMap () {streetView.setVisible (false); } funcție showStreetView () {setStreetViewOptions (map.getCenter ()); streetView.setVisible (adevărat); } 

5- Închidem etichetele corespunzătoare și adăugăm porțiunea de cod HTML pentru a completa exemplul nostru:

Harta cu Street View

6- Executăm exemplul nostru în browser și apăsăm butonul Afișați Street View pentru a vizualiza funcționalitatea așa cum o putem vedea în următoarea imagine:

MARI

Dacă dorim să revenim la vizualizarea implicită a hărții noastre, trebuie doar să apăsăm butonul Arată harta.
Cu aceasta încheiem acest tutorial, deoarece am putut aprecia serviciile prezente în API Google Maps Javascript Acestea ne permit să extindem funcționalitățile hărților noastre mult mai mult, poziționându-le ca o opțiune de luat în considerare în sistemele pe care le implementăm, care trebuie să utilizeze calculele de localizare și timp și / sau distanță.
Vă reamintesc acest tutorial, care va fi, de asemenea, la îndemână: învățați utilizarea vectorilor în Google MapsV-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv