Sadržaj
Usluge koje nudi Javascript API za Google karte su toliko raznoliki koliko i funkcionalni, imaju kvalitetu koja ih razlikuje Google karte Od svojih konkurenata, ove usluge općenito rade asinkrono, što omogućuje upućivanje zahtjeva vanjskom poslužitelju, a za obradu odgovora zadužena je metoda tipa povratnog poziva.Jedna od prednosti ovih usluga je ta što su potpuno kompatibilne s API klasama i objektima. Možemo od savjetovanja s adresom određene točke na našoj karti do čak implementacije pogleda na ulicu.
Prije nego prijeđemo na primjere, pogledajmo neke od najvažnijih usluga koje ćemo koristiti u ovom vodiču.
Geo kodiranjeOva usluga omogućuje nam pretvaranje uobičajenih adresa u geografske koordinate na temelju zemljopisne širine i dužine točke, to nam omogućuje postavljanje oznaka ili pozicioniranje karte, za izvođenje ovih operacija API pruža klasu tzv. geokoder ().
Matrica udaljenostiOva usluga pomaže nam izračunati udaljenost i trajanje rute između više točaka, nešto što se danas široko koristi, za to imamo svrhu google.maps.DistanceMatrixService i s njim povezane metode.
Pogled s uliceServis Pogled s ulice ili pogled na ulicu nudi nam panoramski pogled od 360 stupnjeva na područjima gdje ima pokrivenost, nešto po čemu će se naše karte bez sumnje istaknuti.
Upamtite da sam ovdje detaljno opisao rad API -ja i rukovanje događajima na Google kartama te Uvod za razumijevanje Javascript API -ja na Google kartama.
Za izvođenje ovog primjera koristit ćemo uslugu geokoder () No, kao što smo spomenuli, to nam omogućuje pretvaranje adrese u koordinatu, to je u redu, ali za konvencionalnog korisnika to je nešto što ne vidi veliku korist, pa ćemo zato koristiti obrnuti geokoder da jednim klikom dođemo do potrebne adrese. Pogledajmo korake koje moramo slijediti:
1- Prvo, kao što već znamo, uključujemo API, bez zaborava korištenja naših vjerodajnica, osim toga uključit ćemo i knjižnicu crtanje koja će nam omogućiti implementaciju funkcionalnosti označavanja crteža, povezujemo ovu knjižnicu s vjerodajnicom sa simbolom & kao što ćemo vidjeti u nastavku:
2- Ne možemo zaboraviti na stilove karte, koji će joj dati vrstu vizualizacije na stranici, kao i definiranje globalnih varijabli koje će imati globalni opseg u svim metodama našeg koda:
var karta; var geokoder var skočni prozor;
3- Nakon toga definiramo našu metodu initializeMap () gdje ćemo prvo učiniti deklariranje našeg objekta tipa geokoder pomažući nam s nastave Geokoder () i sa Info prozor objekt za skočni prozor koji će prikazati adresu na ekranu:
funkcija initializeMap () {geocoder = novi google.maps.Geocoder (); popup = novi google.maps.InfoWindow (); 4- Uključujemo konvencionalne opcije karte, poput središta, zumiranja i vrste baze, dobivamo element SUNCE i mi primjenjujemo metodu Karta:
google.maps.visualRefresh = istina; var mapOptions = {centar: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = nova google.maps.Map (mapElement, mapOptions); 5- Sada stvaramo upravitelja crteža koji će nam omogućiti crtanje oznaka, za to ćemo napraviti instancu DrawingManager, činimo ga vidljivim na korisničkom sučelju i odabiremo koji će se načini prikazati u kontroli i u kojem će položaju biti:
var drawingManager = novi google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}}) ; 6- Sada omogućujemo novostvorenu funkcionalnost, dodajemo slušatelja za naš događaj i izvedbu obrnuti geokoder metodom dobivamo položaj zemljopisne širine i dužine našeg markera getPosition ():
drawingManager.setMap (karta); google.maps.event.addListener (drawingManager, 'markercomplete', funkcija (marker) {var markerPosition = marker.getPosition (); 7- Kako bismo dovršili obrnuti geokoder koristit ćemo uslugu geokod () i napravit ćemo uvjet za provjeru da usluga vraća valjani odgovor ako ga ne obradimo, tako da korisnik zna da nije uspio, a ako je rezultat točan, pozivamo našu metodu Prikaži adresu ():
geocoder.geocode ({'latLng': markerPosition}, funkcija (rezultati, status) {if (status == google.maps.GeocoderStatus.OK) {if (rezultati) {ShowAddress (rezultati [0], marker);}} else {alert ("Usluga nije uspjela:" + status);}}); 8- Konačno, moramo samo izgraditi metodu Prikaži adresu () koji će primiti rezultat našeg obrnutog geokodera i položaj markera, pomoću toga možemo uspostaviti centar i prikazati podatke formatirane adrese bez ikakvih problema:
funkcija ShowAddress (rezultat, marker) {map.setCenter (marker.getPosition ()); map.setZoom (13); var popupContent = 'Adresa: '+ result.formatted_address; popup.setContent (popupContent); popup.open (karta, marker); } 9- Zatvaramo odgovarajuće oznake i dodajemo dio HTML koda kako bismo dovršili naš primjer:
Pronađite adresu na karti jednim klikom
10- Izvršavamo u svom pregledniku i kliknemo bilo koju točku na karti i dobit ćemo adresu prikazanu u skočnom prozoru koji deklariramo, to bi trebalo izgledati ovako:
POVEĆAJTE
The Javascript API za Google karte pruža nam vrlo korisne usluge, jedna od njih je matrica udaljenosti koja nam omogućuje izračunavanje udaljenosti i vremena između više točaka, funkcionalnost koju možemo koristiti za implementaciju različitih rješenja u bilo kojem poslu, od izračunavanja vremena isporuke ili uspostavljanja najoptimalnije rute između različitih točaka. Pogledajmo korake koje moramo slijediti za implementaciju ove funkcionalnosti između naših karata.
1- Uključujemo naš API zajedno s knjižnicom crtanje, kao i stilove za prikaz naše karte i spremnika naše matrice:
2- Definiramo globalne varijable za upotrebu u cijelom opsegu našeg koda i u funkciji initializeMap () Pokrećemo nizove za rukovanje zemljopisnom širinom i dužinom i ishodišta i odredišta:
var karta; var originLatLon; var destinationLatLon; var distanceMatrixService; var markerCount; var arrayResult; funkcija initializeMap () {originLatLon = []; destinationLatLon = []; 3- Zatim u istoj funkciji dobivamo gumb i rukovatelj događajima za njega, dodatno inicijaliziramo objekt za uslugu DistanceMatrixService kao i brojač za oznake i dodijeli rezultat niza u spremnik div:
var generatedBtnMatrix = document.getElementById ('generatedMatrix'); generatedBtnMatrix.addEventListener ('klik', funkcija () {MatrixRequest ();}); distanceMatrixService = nova google.maps.DistanceMatrixService (); markerCount = 0; matrica rezultata = document.getElementById ('niz rezultata'); 4- Uključujemo konvencionalne opcije karte, poput središta, zumiranja i vrste baze, dobivamo element SUNCE i mi primjenjujemo metodu Karta:
google.maps.visualRefresh = istina; var mapOptions = {centar: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = nova google.maps.Map (mapElement, mapOptions); 5- Kao što smo u prethodnoj vježbi stvorili upravitelja crtanja koji će nam omogućiti crtanje oznaka, za to ćemo napraviti primjer DrawingManager a mi pružamo potrebne opcije, omogućujemo ga i dodajemo slušatelja za događaj:
var drawingManager = novi google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}}); drawingManager.setMap (karta); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) { 6- Nakon toga provodimo provjere kako bismo ograničili broj dopuštenih odredišta i postavili ikone koje ćemo koristiti za svoje oznake:
markerCount ++; if (markerCount> 10) {alert ("Nije dopušteno više odredišta"); drawingManager.setMap (null); marker.setMap (null); povratak; } 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- Sada samo moramo stvoriti svoje funkcije za obradu zahtjeva upućenih službi distanceMatrixService, prvo stvaramo onu koja će pripremiti svojstvo zahtjeva:
functionMatrixRequest () {distanceMatrixService.getDistanceMatrix ({ishodišta: LatinSource, odredišta: LatinDestiny, travelMode: google.maps.TravelMode.DRIVING,}, getMatrixResult); } 8- Mi stvaramo funkciju povratnog poziva koja će nam omogućiti dobivanje odgovora usluge i u koju ćemo uključiti potrebne provjere u slučaju da usluga ne riješi grešku na najbolji način:
funkcija getResultMatrix (rezultat, status) {resultMatrix.innerHTML = ''; if (status == google.maps.DistanceMatrixStatus.OK) {var originAddresses = result.originAddresses; var destinationAddresses = result.destinationAddresses; for (var i = 0, l = originAddresses.length; i <l; i ++) {var elements = result.rows [i] .elements; za (var j = 0, m = elementi.dužina; j <m; j ++) {var originAddress = originAddresses [i]; var destinationAddress = destinationAddresses [j]; var element = elementi [j]; var distance = element.distance.text; var duration = element.duration.text; resultsDivMatrix (izvorna adresa, adresa odredišta, udaljenost, trajanje, i, j); }}} else {alert ('Nije moguće dobiti niz:' + status); } 9- Dodatno stvaramo funkciju koja će upisivati rezultate dobivene u odgovarajući div:
functionDivMatrixResults (originAddress, destinationAddress, distance, duration, originAddressCount, destinationAddressCount) {var existingContent = resultResult.innerHTML; var newContent; newContent = 'Izvor " + countLetters (originAddressCount) +":
'; newContent + = originAddress + '
'; newContent + = 'Odredište ' + countLetters (destinationAddressCount) +':
'; newContent + = destinationAddress + '
'; newContent + = 'Sudbina: ' + udaljenost +'
'; newContent + = 'Sudbina: ' + trajanje +'
'; newContent + = '
'; resultArray.innerHTML = existingContent + newContent; } 9- Na kraju u našem Javascript Brojačima upravljamo u funkciji da vratimo naziv koji odgovara brojaču markera koji postavljamo:
funkcija countLetters (count) {switch (count) {case 0: return 'Comics Store'; slučaj 1: vratiti 'Trgovina videoigara'; slučaj 2: vratite 'Comics Store'; slučaj 3: vratite 'Comics Store'; slučaj 4: vratite "Trgovina videoigara"; zadano: return null; }} 10- Zatvorimo odgovarajuće oznake i dodamo dio koda HTML da upotpunimo naš primjer:
Koristite matricu udaljenosti
11- Naš primjer izvršavamo u pregledniku, a za vizualizaciju rada naše karte postavit ćemo 4 točke interesa i pritisnuti gumb Generirajte matricu udaljenosti:
POVEĆAJTE
Za završetak ovog vodiča implementirat ćemo uslugu Pogled s ulice, To je prilično jednostavan primjer, ali koji će se, dodajući ostalim dostupnim uslugama, naše karte istaknuti iznad ostalih, da vidimo što moramo učiniti za implementaciju ove usluge:
1- Uključujemo API i definiramo odgovarajuće stilove, u ovom primjeru nećemo koristiti biblioteku crteža pa neće biti uključena:
2- Definiramo naše globalne varijable i stvaramo svoju funkciju initializeMap () Uz konvencionalne opcije, središte naše karte, zumiranje i vrstu baze, dobivamo element SUNCE a mi primjenjujemo metodu Karta:
var karta; var geokoder; var streetView; funkcija initializeMap () {popup = novi google.maps.InfoWindow (); geokoder = novi google.maps.Geocoder (); google.maps.visualRefresh = istina; var mapOptions = {centar: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = nova google.maps.Map (mapElement, mapOptions); 3- Unutar svoje funkcije nazivamo uslugu Pogled s ulice i nakon toga stvaramo funkciju za postavljanje njezinih opcija kao što su lokacija i gledište:
streetView = map.getStreetView (); } funkcija setOptionsStreetView (lokacija) {streetView.setPosition (lokacija); streetView.setPov ({naslov: 0, svrbež: 10}); } 4- Na kraju stvaramo funkcije za prebacivanje s uobičajenog prikaza karte na Streer View, da vidimo kako ovo izgleda:
funkcija showMap () {streetView.setVisible (false); } funkcija showStreetView () {setStreetViewOptions (map.getCenter ()); streetView.setVisible (true); } 5- Zatvorimo odgovarajuće oznake i dodamo dio koda HTML da upotpunimo naš primjer:
Karta s Prikazom ulica
6- Pokrećemo naš primjer u pregledniku i pritisnemo gumb Prikaži Street View za vizualizaciju funkcionalnosti kao što vidimo na sljedećoj slici:
POVEĆAJTE
Ovim završavamo ovaj vodič jer smo mogli cijeniti usluge prisutne u Javascript API za Google karte Omogućuju nam da još više proširimo funkcionalnosti naših karata, pozicionirajući ih kao opciju koju trebamo uzeti u obzir u sustavima koje implementiramo, a za koje su potrebni izračuni lokacije i vremena te / ili udaljenosti.
Podsjećam vas na ovaj vodič koji će vam također dobro doći: Naučite koristiti vektore na Google kartamaJe li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod
