Sadržaj
Karte generirane s Javascript API za Google karte Neće uvijek biti statični, iako se većinom koriste za vizualizaciju, to nije uvijek slučaj, zato će ponekad biti prilika da ćemo morati proširiti njihov opseg kako bi u njima mogli prikazati dodatne informacije.Ove dodatne informacije koje moramo uključiti postižu se pomoću vektor koji nisu ništa drugo do oblici koji se sastoje od točaka, gdje su sve vrste vektora koje koristi API Zovu se slojevi ili prekrivanje.
PreporukaU prošlim smo vodičima vidjeli uvod API, pregledali smo najvažnije opcije, naučili smo kako dobiti vjerodajnice za programere Google i provodimo nekoliko jednostavnih primjera njegove uporabe, stoga prije nego pročitate sadržaj ovog vodiča ili učinite ovdje navedene primjere, preporučujemo da pogledate ovaj vodič.
Nakon što smo prošli kroz preporučeni vodič i bili u kontekstu, prijeđimo na praktične primjere, ovo za bolje razumijevanje uporabe vektora u našim kartama generiranim pomoću API -ja.
Korištenje karata generiranih s API najčešće je koncentriran na web stranicama gdje mu je glavna funkcija prikazati lokaciju tvrtke ili tvrtke. To možemo nazvati a točka interesa da ga možemo bez problema predstaviti vrstom vektora, koji za potrebe Javascript API za Google karte poznat je kao marker.
Bez odlaganja, pogledajmo korake koje moramo slijediti za implementaciju standardnog markera i dodatno prilagođenog na našu kartu.
1- Prvo što moramo učiniti je uključiti API i stilove za vizualizaciju naše karte, važno je napomenuti da moramo koristiti našu Vjerodajnice za Googleove programere za ispravan rad ovog primjera:
2- Definiramo naše globalne varijable, takozvanu kartu i niz varijabli koje ćemo koristiti za generiranje slučajnih oznaka prema koordinatama koje okružuju područje Madrid.:
var karta; var minLat = 38, maxLat = 41, minLng = -3, maxLng = -9, markerId = 1;
3- Zatim definiramo funkciju inicijalizacije naše karte, koja će sadržavati najvažnije opcije za nju kao zumiranje, osnovni tip za kartu i koordinate središta koji će u ovom slučaju biti oni od Madrid, dobivamo iskaznica div od strane SUNCE, inicijaliziramo kartu i definiramo funkciju za rukovanje događajima pri postavljanju oznaka na kartu, pogledajmo segment koda koji smo upravo opisali:
funkcija initializeMap () {google.maps.visualRefresh = true; var mapOptions = {centar: new google.maps.LatLng (40.41678, -3.70379), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); map = nova google.maps.Map (mapElement, mapOptions); eventsMarker (); } 4- Sada moramo izgraditi svoju funkciju eventsMarker () koji će u svojoj definiciji imati dva događaja vezana po kliku prema ID -u koji se pritisne s dvije različite veze i koji će pozvati još dvije funkcije koje će biti zadužene za postavljanje oznaka:
functionMarkerEvents () {document.getElementById ('add_Marker'). addEventListener ('klik', funkcija () {addMarker ();}); document.getElementById ('add_person_Marker'). addEventListener ('klik', funkcija () {addPersonMarker ();}); } 5- Prije nego što konstruirate dvije funkcije koje će postaviti oznake, važno je obaviti neki rad na koordinatama kako bi nam donijele slučajne vrijednosti u tom rasponu i kako bi ih mogle interpretirati Javascript API za Google karte, to ćemo učiniti s nekim aritmetičkim operacijama na globalnim varijablama koordinata, pogledajmo odgovarajuću funkciju:
funkcija createLaLgRandom () {var deltaLat = maxLat - minLat; var deltaLng = maxLng - minLng; var rndNumLat = Math.random (); var newLat = minLat + rndNumLat * deltaLat; var rndNumLng = Math.random (); var newLng = minLng + rndNumLng * deltaLng; vratiti novi google.maps.LatLng (newLat, newLng); } 6- Kad se to učini, možemo izgraditi naše funkcije za pričvršćivanje oznaka na našu kartu, za to to činimo metodom Marker Za generiranje standardnog markera i uz prethodnu funkciju generiramo slučajnu koordinatu na kojoj će se prikazati:
funkcija addMarker () {var koordinate = createLgRandom (); var marker = new google.maps.Marker ({položaj: koordinata, karta: karta, naslov: 'Slučajna oznaka -' + markerId}); markerId ++; } Prije nego pređemo na naš prilagođena oznaka Važno je napomenuti da se temelji na ikonama i one moraju biti dostupne u direktoriju našeg projekta, jer su za ovu vježbu neke od besplatnih ikona dostupnih na stranici sa kartama korištene u kategoriji markeri, pa će nam raditi bez ikakvih problema, za to preuzimamo neke i stavljamo ih u mapu tzv img nalazi se u korijenu našeg projekta kao što možemo vidjeti na sljedećoj slici:
POVEĆAJTE
funkcija addPersonMarker () {var markerIcons = ['stripovi', 'videoigre', 'računala', 'hotfood', 'bike_rising']; var rndMarkerId = Math.floor (Math.random () * markerIcons.length); var koordinate = createLaLgRandom (); var marker = novi google.maps.Marker ({položaj: koordinata, karta: karta, ikona: 'img /' + markerIcons [rndMarkerId] + '.png.webp', naslov: 'Slučajni marker -' + markerId}); markerId ++; } 8- Na kraju dodajemo događaj za inicijalizaciju naše karte i stvaramo dvije veze prije našeg div -a s ID -ovima koje definiramo za naše događaje koji će pozivati odgovarajuće funkcije:
google.maps.event.addDomListener (prozor, 'učitavanje', inicijalizacijska karta); Dodajte oznake
Dodaj oznaku | Dodajte prilagođenu oznaku
S ovim već imamo svoju kartu s funkcionalnošću mogućnosti dodavanja standardni markeri Y prilagođen Prema onome što odaberemo, važno je spomenuti da možemo dodati onoliko oznaka koliko želimo, to će nam omogućiti da vidimo rad API -ja, da na kraju vidimo kako to izgleda kada ga pokrenemo u svom pregledniku:
POVEĆAJTE
1- Kreirat ćemo novu datoteku add_popup.html i upotrijebit ćemo prethodni primjer kao osnovu za umetanje novih funkcionalnosti, za to kopiramo i zalijepimo kôd naše karte i locirat ćemo funkciju initializeMap () gdje ćemo nakon dobivanja ID -a definirati skočni prozor za središte naše karte pomoću metode InfoWindow, pogledajmo kod za gore spomenutu funkcionalnost:
var infowindow = new google.maps.InfoWindow ({content: 'Skočni sadržaj:
Ovaj skočni prozor prikazuje središte karte koja je Madrid', position: new google.maps.LatLng (40.41678, -3.70379)}); infowindow.open (karta); 2- Sada ćemo promijeniti našu funkciju addMarker () za dodavanje skočnog prozora svakom markeru koji se pojavi na našoj karti, za to ćemo ponovo koristiti funkciju InfoWindow () i mi ćemo dodati događaj za varijablu koju definiramo instancom metode, da vidimo:
funkcija addMarker () {var koordinate = createLgRandom (); var marker = new google.maps.Marker ({položaj: koordinata, karta: karta, naslov: 'Slučajna oznaka -' + markerId}); var infowindow = new google.maps.InfoWindow ({content: 'Marker Info Window - ID:' + markerId}); google.maps.event.addListener (marker, 'klik', funkcija () {infowindow.open (karta, marker);}); markerId ++; } 3- Kad to učinimo, pogledajmo kako izgleda naša karta s funkcionalnošću skočnog prozora koji smo upravo uključili:
POVEĆAJTE
POVEĆAJTE
Snagu vektora smo već testirali pokazujući točke interesa na karti sa markeriMeđutim, možemo koristiti vektore za crtanje linija i prikazivanje rute između dvije točke na našoj karti, da vidimo kako to radimo:
1- Napravit ćemo datoteku pod nazivom add_line.html i mi ćemo uključiti naš API, kao i stilove iz prvog primjera, sada ćemo definirati koordinate koje idu od Madrid do Barcelona, da vidimo:
var koordinate Linija = [[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- Prije nego pređemo na funkciju inicijalizacije naše karte, prvo ćemo stvoriti funkciju addLine () gdje ćemo prvo učiniti ponoviti niz koordinata i stvoriti novi niz koji će sadržavati objekt tipa LatLng, da vidimo:
funkcija addLine () {var pointCount = coordinateLine.length; var linePath = []; for (var i = 0; i <pointCount; i ++) {var tempLatLng = nova google.maps.LatLng (koordinatna linija [i] [0], koordinatna linija [i] [1]); linePath.push (tempLatLng); } 3- Zatim postavljamo svojstva za našu liniju, poput boje, neprozirnosti i debljine. Nakon što to učinimo, samo moramo poslati metodu Polyline opcije kao parametar i postavite varijablu polilinije na trenutnu kartu:
var lineOptions = {path: linePath, strokeWeight: 7, strokeColor: '# 313cac', strokeOpacity: 0.8} var polyline = new google.maps.Polyline (lineOptions); polyline.setMap (karta); } 4- Konačno stvaramo svoju dobro poznatu funkciju initializeMap () i umjesto da na kraju imamo funkciju koja se zove MarkerEvents, ovaj ćemo redak zamijeniti imenom naše funkcije addLine (), stvaramo naš HTML i izvršavamo ga u svom pregledniku, trebao bi izgledati ovako:
POVEĆAJTE
Ovo može zvučati prilično komplicirano, ali nije, uz pomoć klasa i metoda API Možemo to riješiti s nekoliko redaka koda, da vidimo kako ćemo to učiniti:
1- Prvo je uključiti naše API, naše stilove i definiramo naše globalne varijable, koristimo iste koordinate iz prethodnog primjera za korištenje iste staze, dodatno definiramo varijablu polilinije kao globalni da bismo ga mogli koristiti u punom opsegu našeg Javascript:
var karta; var polyline; var koordinate Linija = [[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- Sada stvaramo svoju funkciju addAnimatedLine () koji će imati strukturu sličnu funkciji addLine () Iz prethodnog primjera, međutim, ova funkcija imat će definiciju simbola koji ćemo koristiti za prikaz objekta u pokretu između ove dvije točke, za ovaj slučaj upotrijebit ćemo strelicu:
var arrowSymbol = {strokeColor: '# 000', scale: 3, path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}; 3- Konačno, ovu varijablu moramo samo postaviti na opciju ikone iz definicije linije:
var lineOptions = {path: linePath, icons: [{icon: simbol strelice}], strokeWeight: 3, strokeColor: '# 313cac', strokeOpacity: 0,8} 4- Nakon što to učinimo, potrebno je samo animirati našu ikonu i to činimo u funkciji koja se zove animateArrow () koje moramo uključiti na kraju definicije funkcije addAnimatedLine () Pogledajmo što funkcija sadrži:
funkcija animateArrow () {var brojač = 0; var accessVar = window.setInterval (function () {counter = (counter + 1)% 100; var strelice = polyline.get ('ikone'); strelice [0]. offset = (counter / 2) + '%'; polyline.set ('ikone', strelice);}, 50); } 5- Za kraj inicijaliziramo našu kartu kako već znamo i pozivamo našu funkciju addAnimatedLine ()Da vidimo kada izvršavamo kako izgleda u našem pregledniku, važno je napomenuti da strelica ima učinak pomicanja od točke do točke:
POVEĆAJTE
