Bruk av vektorer i Google Maps

Kartene generert med Google Maps Javascript API De vil ikke alltid være statiske, selv om de er brukt mesteparten av tiden for visualisering, er dette ikke alltid tilfelle. Det er derfor det noen ganger vil være behov for å utvide omfanget slik at de kan vise tilleggsinformasjon i dem.
Denne tilleggsinformasjonen vi må inkludere oppnås med vektor som ikke er mer enn former som består av punkter, der alle typer vektorer som brukes av API De kalles overlegg eller overlegg.
AnbefalingI tidligere opplæringsprogrammer så vi introduksjonen til API, vi gjennomgikk de viktigste alternativene, vi lærte hvordan vi kan skaffe legitimasjon for utviklere av Google og vi utfører noen enkle eksempler på bruk, derfor anbefaler vi å ta en titt på denne opplæringen før du leser innholdet i denne opplæringen eller gjør eksemplene nevnt her.
Etter å ha gått gjennom den anbefalte opplæringen og vært i kontekst, la oss gå videre til de praktiske eksemplene, dette for en bedre forståelse av bruken av vektorer i kartene våre som er generert med API.
Bruken av kartene som er generert med API Det er oftest konsentrert på nettsteder der hovedfunksjonen er å vise plasseringen til et selskap eller en virksomhet. Vi kan kalle dette a interessepunkt at vi kan representere det uten problemer med en vektortype, som for Google Maps Javascript API er kjent som markør.
Uten videre må vi se trinnene vi må følge for å implementere en standardmarkør og i tillegg en tilpasset på kartet vårt.
1- Det første vi må gjøre er å inkludere API og stilene for visualisering av kartet vårt, er det viktig å merke seg at vi må bruke vårt Legitimasjon for Google -utviklere for korrekt bruk av dette eksemplet:

2- Vi definerer våre globale variabler, et såkalt kart og en serie variabler som vi vil bruke til å generere tilfeldige markører i henhold til koordinater som omgir området til Madrid.:

 var kart; var minLat = 38, maxLat = 41, minLng = -3, maxLng = -9, markerId = 1; 

3- Så definerer vi initialiseringsfunksjonen til kartet vårt, som vil inneholde de viktigste alternativene for det som zoom, basetype for kart og senterkoordinater som i dette tilfellet vil være de av Madrid, vi får ID av div ved SOL, vi initialiserer kartet og definerer en funksjon for å håndtere hendelsene når vi plasserer markørene på kartet, la oss se på kodesegmentet vi nettopp beskrev:

 funksjon 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'); map = new google.maps.Map (mapElement, mapOptions); eventsMarker (); } 

4- Nå må vi bygge vår funksjon eventsMarker () som i definisjonen vil ha to hendelser knyttet per klikk i henhold til ID -en som trykkes fra to forskjellige lenker, og som vil kalle ytterligere to funksjoner som skal stå for å sette bokmerkene:

 functionMarkerEvents () {document.getElementById ('add_Marker'). addEventListener ('click', function () {addMarker ();}); document.getElementById ('add_person_Marker'). addEventListener ('click', function () {addPersonMarker ();}); } 

5- Før du bygger de to funksjonene som skal sette markørene, er det viktig å gjøre noe med koordinatene slik at de gir oss tilfeldige verdier i det området, og de kan tolkes av Google Maps Javascript API, vil vi gjøre dette med noen aritmetiske operasjoner på de globale variablene til koordinatene, la oss se den tilsvarende funksjonen:

 funksjon 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; returner nye google.maps.LatLng (newLat, newLng); } 

6- Når dette er gjort, kan vi bygge våre funksjoner for å fikse markørene til kartet vårt, for dette gjør vi det med metoden Markør For å generere en standardmarkør og med den forrige funksjonen genererer vi den tilfeldige koordinaten der den skal vises:

 function addMarker () {var koordinat = createLgRandom (); var marker = new google.maps.Marker ({position: coordinate, map: map, title: 'Random Marker -' + markerId}); markerId ++; } 

Før vi går videre til vår tilpasset bokmerke Det er viktig å nevne at det er basert på ikoner, og disse må være tilgjengelige i katalogen til prosjektet vårt, for denne øvelsen ble noen av de gratis ikonene som er tilgjengelige på mapicons -siden brukt under kategorien markører, så de vil fungere for oss uten problemer, for dette laster vi ned noen og plasserer dem i en mappe som heter img ligger ved roten av prosjektet vårt, slik vi kan se på følgende bilde:

FORSTØRRE

7- Etter å ha ikonene våre trenger vi bare å bygge vår funksjon, for dette lager vi en matrise med navnene på ikonene våre, og vi kommer til å kjøre dem tilfeldig og gi en ekstra parameter til metoden vår Markør kalt ikon som vil bruke det nedlastede bildet for å sette markøren:

 function addPersonMarker () {var markerIcons = ['tegneserier', 'videospill', 'datamaskiner', 'hotfood', 'bike_rising']; var rndMarkerId = Math.floor (Math.random () * markerIcons.length); var koordinat = createLaLgRandom (); var marker = new google.maps.Marker ({position: coordinate, map: map, icon: 'img /' + markerIcons [rndMarkerId] + '.png.webp', title: 'Random Marker -' + markerId}); markerId ++; } 

8- Til slutt legger vi til hendelsen for å initialisere kartet vårt og opprette to lenker før div med ID -er som vi definerer for hendelsene våre som vil kalle de tilsvarende funksjonene:

 google.maps.event.addDomListener (vindu, 'last', initialiser kart); Legg til bokmerker
Legg til bokmerke | Legg til egendefinert bokmerke

Med dette har vi allerede kartet vårt med funksjonaliteten for å kunne legge til standard markører Y tilpasset I henhold til det vi velger, er det viktig å nevne at vi kan legge til så mange bokmerker vi vil, dette vil tillate oss å se driften av API, for å fullføre la oss se hvordan det ser ut når vi kjører det i nettleseren vår:

FORSTØRRE

I alle applikasjonene vi finner på nettet som viser et kart, utelukker de ikke muligheten for å vise informasjon relatert til punktet de peker på, det er derfor vi har mulighet til å legge til et popup- eller rullegardinvindu For å vise informasjon i henhold til en bestemt posisjon på kartet vårt eller til og med en markør, la oss se hvordan vi kan gjøre dette:
1- Vi skal lage en ny fil add_popup.html og vi vil bruke det forrige eksemplet som grunnlag for å sette inn de nye funksjonene, for dette kopierer og limer vi inn koden til kartet vårt, og vi skal finne funksjonen initializeMap () hvor vi etter å ha fått ID -en skal definere popup -vinduet for midten av kartet vårt med InfoWindow -metoden, la oss se koden for den nevnte funksjonaliteten:

 var infowindow = nytt google.maps.InfoWindow ({content: 'Popup -innhold:
Denne popupen viser midten av kartet som er Madrid', posisjon: nytt google.maps.LatLng (40.41678, -3.70379)}); infowindow.open (kart); 

2- Nå skal vi endre funksjonen vår addMarker () for å legge til en popup til hver markør som vises på kartet vårt, for dette vil vi bruke funksjonen igjen InfoWindow () og vi vil legge til en hendelse for variabelen som vi definerer med metodeforekomsten, la oss se:

 funksjon addMarker () {var koordinat = createLgRandom (); var marker = new google.maps.Marker ({position: coordinate, map: map, title: 'Random Marker -' + markerId}); var infowindow = nytt google.maps.InfoWindow ({content: 'Marker Info Window - ID:' + markerId}); google.maps.event.addListener (markør, klikk, funksjon () {infowindow.open (kart, markør);}); markerId ++; } 

3- Når dette er gjort, la oss se hvordan kartet vårt ser ut med funksjonaliteten til popup -vinduet som vi nettopp har inkludert:

FORSTØRRE

4- Til slutt, la oss se den lignende funksjonaliteten som vi bruker på bokmerkene våre, vi gjør dette ved å trykke på lenken Legg til bokmerke:

FORSTØRRE

Som vi kunne se, er det ganske enkelt å utvide funksjonaliteten til kartene og markørene våre, vi må bare bruke de riktige metodene for å oppnå det.
Vi har allerede testet kraften til vektorer ved å vise interessepunktene på et kart med markørerImidlertid kan vi bruke vektorer til å tegne linjer og vise ruten mellom to punkter på kartet vårt, la oss se hvordan vi gjør det:
1- Vi skal lage en fil som heter add_line.html og vi kommer til å inkludere vår API så vel som stilene i det første eksemplet, nå skal vi definere koordinatene som går fra Madrid til Barcelona, la oss se:

 var koordinater Linje = [[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- Før vi går videre til initialiseringsfunksjonen til kartet vårt, skal vi først lage funksjonen addLine () der det første vi skal gjøre er å iterere over rekken av koordinater og lage en ny matrise som vil inneholde et objekt av type LatLng, la oss se:

 function addLine () {var pointCount = coordinateLine.length; var linePath = []; for (var i = 0; i <pointCount; i ++) {var tempLatLng = new google.maps.LatLng (coordinateLine [i] [0], coordinateLine [i] [1]); linePath.push (tempLatLng); } 

3- Så setter vi egenskapene for linjen vår, for eksempel farge, opacitet og tykkelse. Etter å ha gjort dette trenger vi bare å sende til metoden Polyline alternativene som en parameter og sett polylinjevariabelen til gjeldende kart:

 var lineOptions = {path: linePath, strokeWeight: 7, strokeColor: '# 313cac', strokeOpacity: 0.8} var polyline = new google.maps.Polyline (lineOptions); polyline.setMap (kart); } 

4- Til slutt lager vi vår velkjente funksjon initializeMap () og i stedet for å ha en funksjon som heter MarkerEvents på slutten av den, skal vi erstatte denne linjen med navnet på funksjonen vår addLine (), vi lager HTML -koden vår og kjører den i nettleseren vår, den skal se slik ut:

FORSTØRRE

I det forrige eksemplet legger vi til en linje på kartet vårt, og dermed demonstrerer vi foreningen av to punkter for å demonstrere ruten mellom dem, men dette eksemplet, til tross for at det er illustrerende, mangler fortsatt noe, og det er det faktum at det viser mobilitet mellom disse to punktene , for eksempel en bil i bevegelse.
Dette kan høres ganske komplisert ut, men det er det ikke ved hjelp av klassene og metodene API Vi kan løse det med noen få kodelinjer, la oss se hvordan vi gjør det:
1- Det første er å inkludere vår API, våre stiler og vi definerer våre globale variabler, bruker vi de samme koordinatene til forrige eksempel for å bruke samme bane, i tillegg definerer vi variabelen polyline som global for å kunne bruke den i hele vårt omfang Javascript:

 var kart; var polyline; var koordinater Linje = [[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- Nå lager vi vår funksjon addAnimatedLine () som vil ha en lignende struktur som funksjonen addLine () Fra forrige eksempel vil imidlertid denne funksjonen ha definisjonen av symbolet som vi vil bruke for å vise objektet i bevegelse mellom disse to punktene, for dette tilfellet vil vi bruke en pil:

 var arrowSymbol = {strokeColor: '# 000', skala: 3, sti: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}; 

3- Til slutt må vi bare sette denne variabelen til alternativet ikoner fra definisjonen av linjen:

 var lineOptions = {path: linePath, icons: [{icon: arrow symbol}], strokeWeight: 3, strokeColor: '# 313cac', strokeOpacity: 0.8} 

4- Når dette er gjort, trenger vi bare å animere ikonet vårt, og vi gjør dette i funksjonen som kalles animateArrow () som vi må inkludere på slutten av definisjonen av funksjonen addAnimatedLine () La oss se hva funksjonen inneholder:

 funksjon animateArrow () {var teller = 0; var accessVar = window.setInterval (function () {counter = (teller + 1)% 100; var piler = polyline.get ('ikoner'); piler [0] .offset = (teller / 2) + '%'; polyline.set ('ikoner', piler);}, 50); } 

5- For å fullføre initialiserer vi kartet vårt som vi allerede kjenner, og kaller vår funksjon addAnimatedLine ()La oss se når vi utfører hvordan det ser ut i nettleseren vår, det er viktig å nevne at pilen har en effekt av å bevege seg fra punkt til punkt:

FORSTØRRE

Med dette siste eksemplet avslutter vi denne opplæringen, ettersom vi kunne se bruken av vektorer i kartene våre, slik at vi kan øke funksjonaliteten og bruken av dem, noe som gir oss muligheten til å implementere interessante steder opp til alternative ruter til punktene vi plasserer i den .Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng