Brug af vektorer i Google Maps

Kortene genereret med Google Maps Javascript API De vil ikke altid være statiske, selvom de bruges det meste af tiden til visualisering, er dette ikke altid tilfældet, derfor vil der nogle gange være lejligheder, hvor vi bliver nødt til at udvide deres omfang, så de kan vise yderligere oplysninger i dem.
Disse yderligere oplysninger, som vi skal inkludere, opnås med vektor som ikke er mere end former bestående af punkter, hvor alle typer vektorer, der bruges af API De kaldes overlejringer eller overlejring.
HenstillingI tidligere tutorials så vi introduktionen til API, vi gennemgik de vigtigste muligheder, vi lærte, hvordan man opnår legitimationsoplysninger for udviklere af Google og vi udfører nogle enkle eksempler på brugen af ​​det, derfor anbefaler vi, at du ser på denne vejledning, før du læser indholdet i denne vejledning eller laver de eksempler, der er nævnt her.
Efter at have gennemgået den anbefalede vejledning og været i kontekst, lad os gå videre til de praktiske eksempler, dette for en bedre forståelse af brugen af ​​vektorer i vores kort genereret med API.
Brugen af ​​de kort, der genereres med API den er oftest koncentreret på websteder, hvor dens hovedfunktion er at vise placeringen af ​​en virksomhed eller virksomhed. Vi kan kalde dette a seværdighed at vi kan repræsentere det uden problemer med en vektortype, som med henblik på Google Maps Javascript API er kendt som markør.
Lad os uden videre fortælle de trin, vi skal følge for at implementere en standardmarkør og desuden en tilpasset en på vores kort.
1- Det første, vi skal gøre, er at inkludere API og stilarterne til visualisering af vores kort, er det vigtigt at bemærke, at vi skal bruge vores Google -udviklers legitimationsoplysninger for den korrekte funktion af dette eksempel:

2- Vi definerer vores globale variabler, et såkaldt kort og en række variabler, som vi vil bruge til at generere tilfældige markører i henhold til koordinater, der omgiver området med Madrid.:

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

3- Derefter definerer vi initialiseringsfunktionen af ​​vores kort, som vil indeholde de vigtigste muligheder for det som zoom, basistype for kort og centerkoordinater som i dette tilfælde vil være dem af Madrid, vi får ID af div ved SOL, vi initialiserer kortet og definerer en funktion til at håndtere begivenhederne, når vi placerer markørerne på kortet, lad os se på det kodesegment, vi lige har beskrevet:

 funktion 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 = nyt google.maps.Map (mapElement, mapOptions); eventsMarker (); } 

4- Nu skal vi bygge vores funktion op eventsMarker () som i definitionen vil have to hændelser bundet pr. klik i henhold til det id, der trykkes fra to forskellige links, og som vil kalde yderligere to funktioner, der skal stå for indstilling af bogmærkerne:

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

5- Inden vi konstruerer de to funktioner, der sætter markørerne, er det vigtigt at arbejde med koordinaterne, så de giver os tilfældige værdier i dette område, og de kan tolkes af Google Maps Javascript API, vi vil gøre dette med nogle aritmetiske operationer på koordinaternes globale variabler, lad os se den tilsvarende funktion:

 funktion 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 vores funktioner til at fastsætte markørerne på vores kort, for dette gør vi det med metoden Markør For at generere en standardmarkør og med den forrige funktion genererer vi den tilfældige koordinat, hvor den vil blive vist:

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

Inden vi går videre til vores brugerdefineret bogmærke Det er vigtigt at nævne, at det er baseret på ikoner, og disse skal være tilgængelige i biblioteket over vores projekt, til denne øvelse blev nogle af de gratis ikoner, der er tilgængelige på mapicons -siden, brugt under kategorien markører, så de vil fungere for os uden problemer, for dette downloader vi nogle og placerer dem i en mappe kaldet img placeret ved roden af ​​vores projekt, som vi kan se på følgende billede:

FORSTØRRE

7- Efter at have haft vores ikoner skal vi kun opbygge vores funktion, til dette opretter vi et array med navnene på vores ikoner, og vi vil køre dem tilfældigt og give en ekstra parameter til vores metode Markør hedder ikon som vil bruge det downloadede billede til at indstille markøren:

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

8- Endelig tilføjer vi begivenheden for at initialisere vores kort og oprette to links før vores div med de id'er, vi definerer for vores begivenheder, der kalder de tilsvarende funktioner:

 google.maps.event.addDomListener (vindue, 'load', initializeMap); Tilføj bogmærker
Tilføj bogmærke | Tilføj brugerdefineret bogmærke

Med dette har vi allerede vores kort med funktionaliteten i at kunne tilføje standard markører Y brugerdefinerede I henhold til hvad vi vælger, er det vigtigt at nævne, at vi kan tilføje så mange bogmærker, som vi vil, dette giver os mulighed for at se betjeningen af ​​API'en, for at afslutte lad os se, hvordan det ser ud, når vi kører det i vores browser:

FORSTØRRE

I alle de applikationer, vi finder på Internettet, der viser et kort, udelukker de ikke muligheden for at vise oplysninger relateret til det punkt, de peger på, derfor har vi mulighed for at tilføje et popup- eller drop-down-vindue For at vise oplysninger i henhold til en bestemt position på vores kort eller endda en markør, lad os se, hvordan vi kan gøre dette:
1- Vi skal oprette en ny fil add_popup.html og vi vil bruge det tidligere eksempel som grundlag for at indsætte de nye funktioner, for dette kopierer og indsætter vi koden på vores kort, og vi skal finde funktionen initializeMap () hvor vi efter at have opnået ID'et skal definere popup'en for midten af ​​vores kort med InfoWindow -metoden, lad os se koden for den førnævnte funktionalitet:

 var infowindow = nyt google.maps.InfoWindow ({indhold: 'Popup -indhold:
Denne popup viser midten af ​​kortet, som er Madrid', position: ny google.maps.LatLng (40.41678, -3.70379)}); infowindow.open (kort); 

2- Nu skal vi ændre vores funktion addMarker () for at tilføje en popup til hver markør, der vises på vores kort, til dette vil vi bruge funktionen igen InfoWindow () og vi tilføjer en begivenhed for variablen, som vi definerer med metodeforekomsten, lad os se:

 funktion addMarker () {var koordinat = createLgRandom (); var marker = new google.maps.Marker ({position: koordinat, map: map, titel: 'Random Marker -' + markerId}); var infowindow = nyt google.maps.InfoWindow ({indhold: 'Marker Info Window - ID:' + markerId}); google.maps.event.addListener (markør, 'klik', funktion () {infowindow.open (kort, markør);}); markerId ++; } 

3- Når dette er gjort, lad os se, hvordan vores kort ser ud med funktionaliteten i popup'en, som vi lige har inkluderet:

FORSTØRRE

4- Lad os endelig se den lignende funktionalitet, som vi anvender på vores bogmærker, vi gør dette ved at trykke på linket Tilføj bogmærke:

FORSTØRRE

Som vi kunne se, er det ganske enkelt at udvide funktionaliteten af ​​vores kort og markører, vi skal bare bruge de passende metoder til at opnå det.
Vi har allerede testet vektorenes effekt ved at vise interessepunkterne på et kort med markørerVi kan dog bruge vektorer til at tegne linjer og vise ruten mellem to punkter på vores kort, lad os se, hvordan vi gør det:
1- Vi skal oprette en fil kaldet add_line.html og vi kommer til at inkludere vores API samt stilarterne i det første eksempel, nu skal vi definere de koordinater, der går fra Madrid til Barcelona, Lad os 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- Inden vi går videre til initialiseringsfunktionen på vores kort, skal vi først oprette funktionen addLine () hvor det første, vi skal gøre, er at iterere over rækken af ​​koordinater og oprette et nyt array, der vil indeholde et objekt af type LatLng, Lad os se:

 funktion 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- Derefter indstiller vi egenskaberne for vores linje, såsom farve, opacitet og tykkelse. Efter at have gjort dette skal vi bare sende til metoden Polyline valgmulighederne som en parameter, og indstil variablen polyline til det aktuelle kort:

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

4- Endelig skaber vi vores velkendte funktion initializeMap () og i stedet for at have en funktion kaldet MarkerEvents i slutningen af ​​den, vil vi erstatte denne linje med navnet på vores funktion addLine (), vi opretter vores HTML og udfører det i vores browser, det skal se sådan ud:

FORSTØRRE

I det foregående eksempel tilføjer vi en linje til vores kort, og dermed demonstrerer vi foreningen af ​​to punkter for at demonstrere ruten mellem dem, men dette eksempel, selvom det er illustrerende, mangler stadig noget, og det er det faktum, at det viser mobilitet mellem disse to punkter , såsom en bil i bevægelse.
Dette kan lyde ret kompliceret, men det er det ikke ved hjælp af klasserne og metoderne i API Vi kan løse det med et par linjer kode, lad os se, hvordan vi gør det:
1- Det første er at inkludere vores API, vores stilarter og vi definerer vores globale variabler, bruger vi de samme koordinater i det foregående eksempel til at bruge den samme sti, derudover definerer vi variablen polyline som global for at kunne bruge det i hele vores omfang Javascript:

 var kort; 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- Nu skaber vi vores funktion addAnimatedLine () som vil have en lignende struktur til funktionen addLine () Fra det foregående eksempel har denne funktion imidlertid definitionen af ​​det symbol, som vi vil bruge til at vise objektet i bevægelse mellem disse to punkter, i dette tilfælde vil vi bruge en pil:

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

3- Endelig skal vi kun indstille denne variabel til indstillingen ikoner fra definitionen af ​​linjen:

 var lineOptions = {sti: linePath, ikoner: [{ikon: pilsymbol}], strokeWeight: 3, strokeColor: '# 313cac', strokeOpacity: 0.8} 

4- Når dette er gjort, behøver vi kun at animere vores ikon, og vi gør dette i den kaldte funktion animateArrow () som vi skal inkludere i slutningen af ​​definitionen af ​​funktionen addAnimatedLine () Lad os se, hvad funktionen indeholder:

 funktion animateArrow () {var tæller = 0; var accessVar = window.setInterval (function () {counter = (counter + 1)% 100; var pile = polyline.get ('ikoner'); pile [0] .offset = (tæller / 2) + '%'; polyline.set ('ikoner', pile);}, 50); } 

5- For at afslutte initialiserer vi vores kort, som vi allerede kender, og kalder vores funktion addAnimatedLine ()Lad os se, når vi udfører, hvordan det ser ud i vores browser, det er vigtigt at nævne, at pilen har en effekt at flytte fra punkt til punkt:

FORSTØRRE

Med dette sidste eksempel afslutter vi denne vejledning, da vi kunne se brugen af ​​vektorer i vores kort giver os mulighed for at øge deres funktionalitet og anvendelighed, hvilket giver os mulighed for at implementere interessepunkter op til alternative ruter til de punkter, vi placerer i det .Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt