Användning av vektorer i Google Maps

Kartorna som genererades med Google Maps Javascript API De kommer inte alltid att vara statiska, även om de används oftast för visualisering, så är det inte alltid så. Det är därför som det ibland kommer att vara fall då vi kommer att behöva utöka deras omfattning så att de kan visa ytterligare information i dem.
Denna ytterligare information som vi måste inkludera uppnås med vektor som inte är annat än former som består av punkter, där alla typer av vektorer som används av API De kallas överlägg eller överlägg.
RekommendationI tidigare tutorials såg vi introduktionen till API, vi granskade de viktigaste alternativen, vi lärde oss hur man skaffar referenser för utvecklare av Google och vi utför några enkla exempel på dess användning, därför rekommenderar vi att du tittar på denna handledning innan du läser innehållet i denna handledning eller gör de exempel som nämns här.
Efter att ha gått igenom den rekommenderade självstudien och varit i sitt sammanhang, låt oss gå vidare till de praktiska exemplen, detta för en bättre förståelse av användningen av vektorer i våra kartor som genereras med API: et.
Användningen av kartorna som genereras med API det är oftast koncentrerat till webbplatser där dess huvudsakliga funktion är att visa platsen för ett företag eller företag. Vi kan kalla detta för a sevärdhet att vi kan representera det utan problem med en typ av vektor, som för Google Maps Javascript API är känd som markör.
Utan vidare, låt oss se stegen vi måste följa för att implementera en standardmarkör och dessutom en anpassad på vår karta.
1- Det första vi måste göra är att inkludera API och stilarna för visualisering av vår karta, är det viktigt att notera att vi måste använda vår Googles utvecklaruppgif.webpter för korrekt användning av detta exempel:

2- Vi definierar våra globala variabler, en så kallad karta och en serie variabler som vi kommer att använda för att generera slumpmässiga markörer enligt koordinater som omger området för Madrid.:

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

3- Sedan definierar vi initialiseringsfunktionen för vår karta, som kommer att innehålla de viktigaste alternativen för den som zoom, bastyp för karta och mittkoordinater som i detta fall kommer att vara de av Madrid, vi får ID av div genom SOL, vi initierar kartan och definierar en funktion för att hantera händelserna när vi placerar markörerna på kartan, låt oss titta på kodsegmentet vi just beskrev:

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

4- Nu måste vi bygga upp vår funktion eventsMarker () som i sin definition har två händelser bundna per klick enligt ID som trycks från två olika länkar och som kommer att kalla ytterligare två funktioner som kommer att ansvara för inställningen av bokmärkena:

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

5- Innan vi konstruerar de två funktionerna som kommer att ställa in markörerna är det viktigt att göra lite arbete med koordinaterna så att de ger oss slumpmässiga värden i det intervallet och de kan tolkas av Google Maps Javascript API, vi kommer att göra detta med några aritmetiska operationer på koordinaternas globala variabler, låt oss se motsvarande 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; returnera nya google.maps.LatLng (newLat, newLng); } 

6- När detta är gjort kan vi bygga våra funktioner för att fixa markörerna till vår karta, för detta gör vi det med metoden Markör För att generera en standardmarkör och med den tidigare funktionen genererar vi den slumpmässiga koordinaten där den kommer att visas:

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

Innan vi går vidare till vår anpassat bokmärke Det är viktigt att nämna att det är baserat på ikoner och dessa måste vara tillgängliga i katalogen för vårt projekt, för denna övning användes några av de gratis ikoner som finns tillgängliga på mapicons -sidan under kategorin markörer, så de kommer att fungera för oss utan problem, för detta laddar vi ner några och placerar dem i en mapp som heter img ligger i roten av vårt projekt som vi kan se i följande bild:

FÖRSTORA

7- Efter att ha våra ikoner behöver vi bara bygga vår funktion, för detta skapar vi en array med namnen på våra ikoner och vi kommer att köra dem slumpmässigt, vilket ger en ytterligare parameter till vår metod Markör kallad ikon som använder den nedladdade bilden för att ställa in markören:

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

8- Slutligen lägger vi till händelsen för att initiera vår karta och skapa två länkar före vår div med ID: n som vi definierar för våra händelser som kommer att kalla motsvarande funktioner:

 google.maps.event.addDomListener (fönster, 'ladda', initiera karta); Lägg till bokmärken
Lägg till bokmärke | Lägg till anpassat bokmärke

Med detta har vi redan vår karta med funktionen att kunna lägga till standardmarkörer Y beställnings- Enligt vad vi väljer är det viktigt att nämna att vi kan lägga till så många bokmärken som vi vill, detta gör att vi kan se hur API: n fungerar, för att avsluta låt oss se hur det ser ut när vi kör det i vår webbläsare:

FÖRSTORA

I alla applikationer som vi hittar på webben som visar en karta utesluter de inte möjligheten att visa information relaterad till den punkt de pekar på, det är därför vi har möjlighet att lägga till ett popup- eller rullgardinsfönster För att visa information enligt en viss position på vår karta eller till och med en markör, låt oss se hur vi kan göra detta:
1- Vi ska skapa en ny fil add_popup.html och vi kommer att använda det föregående exemplet som grund för att infoga de nya funktionerna, för detta kopierar och klistrar vi in ​​koden på vår karta och vi kommer att hitta funktionen initializeMap () där vi efter att ha fått ID: n kommer att definiera popup -fönstret för mitten av vår karta med InfoWindow -metoden, låt oss se koden för den ovan nämnda funktionaliteten:

 var infowindow = nytt google.maps.InfoWindow ({content: 'Popup -innehåll:
Denna popup visar mitten av kartan som är Madrid', position: new google.maps.LatLng (40.41678, -3.70379)}); infowindow.open (karta); 

2- Nu ska vi ändra vår funktion addMarker () för att lägga till en popup till varje markör som visas på vår karta, för detta kommer vi att använda funktionen igen InfoWindow () och vi kommer att lägga till en händelse för variabeln som vi definierar med metodinstansen, låt oss se:

 funktion addMarker () {var koordinat = createLgRandom (); var marker = new google.maps.Marker ({position: koordinat, karta: karta, titel: 'Random Marker -' + markerId}); var infowindow = nytt google.maps.InfoWindow ({content: 'Marker Info Window - ID:' + markerId}); google.maps.event.addListener (markör, "klick", funktion () {infowindow.open (karta, markör);}); markerId ++; } 

3- När detta är gjort, låt oss se hur vår karta ser ut med funktionaliteten i popupen som vi just har inkluderat:

FÖRSTORA

4- Slutligen, låt oss se liknande funktioner som vi tillämpar på våra bokmärken, vi gör detta genom att trycka på länken Lägg till bokmärke:

FÖRSTORA

Som vi kunde se är det ganska enkelt att utöka funktionaliteten för våra kartor och markörer, vi måste bara använda lämpliga metoder för att uppnå det.
Vi har redan testat kraften hos vektorer genom att visa intressepunkterna på en karta med markörerMen vi kan använda vektorer för att rita linjer och visa vägen mellan två punkter på vår karta, låt oss se hur vi gör det:
1- Vi ska skapa en fil som heter add_line.html och vi kommer att inkludera vårt API samt stilarna i det första exemplet, nu ska vi definiera koordinaterna som går från Madrid till Barcelona, låt 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- Innan vi går vidare till initialiseringsfunktionen på vår karta ska vi först skapa funktionen addLine () där det första vi ska göra är att iterera över matrisen av koordinater och skapa en ny matris som innehåller ett objekt av typ LatLng, låt oss se:

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

3- Sedan ställer vi in ​​egenskaperna för vår linje, till exempel färg, opacitet och tjocklek. Efter att ha gjort detta behöver vi bara skicka till metoden Polyline alternativen som en parameter och ställ in variabeln polyline till den aktuella kartan:

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

4- Slutligen skapar vi vår välkända funktion initializeMap () och istället för att ha en funktion som heter MarkerEvents i slutet av den, kommer vi att ersätta den här raden med namnet på vår funktion addLine (), vi skapar vår HTML och kör den i vår webbläsare, den ska se ut så här:

FÖRSTORA

I det föregående exemplet lägger vi till en rad på vår karta och därmed demonstrerar vi föreningen av två punkter för att visa vägen mellan dem, men detta exempel, trots att det är illustrativt, saknar fortfarande något och det är faktumet att visa rörlighet mellan dessa två punkter , till exempel en bil i rörelse.
Detta kan låta ganska komplicerat men det är det inte, med hjälp av klasserna och metoderna för API Vi kan lösa det med några rader kod, låt oss se hur vi gör det:
1- Det första är att inkludera vår API, våra stilar och vi definierar våra globala variabler, vi använder samma koordinater för föregående exempel för att använda samma sökväg, dessutom definierar vi variabeln polylin som global för att kunna använda den i hela vår omfattning Javascript:

 var karta; 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 skapar vi vår funktion addAnimatedLine () som kommer att ha en liknande struktur som funktionen addLine () Från det föregående exemplet kommer dock denna funktion att ha definitionen av symbolen som vi kommer att använda för att visa det rörliga objektet mellan dessa två punkter, för detta fall kommer vi att använda en pil:

 var arrowSymbol = {strokeColor: '# 000', skala: 3, sökväg: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}; 

3- Slutligen behöver vi bara ställa in denna variabel till alternativet ikoner från definitionen av raden:

 var lineOptions = {sökväg: linePath, ikoner: [{ikon: pilsymbol}], strokeWeight: 3, strokeColor: '# 313cac', strokeOpacity: 0,8} 

4- När detta är gjort behöver vi bara animera vår ikon och vi gör detta i funktionen som kallas animateArrow () som vi måste inkludera i slutet av definitionen av funktionen addAnimatedLine () Låt oss se vad funktionen innehåller:

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

5- För att avsluta initierar vi vår karta som vi redan vet och kallar vår funktion addAnimatedLine ()Låt oss se när vi utför hur det ser ut i vår webbläsare, det är viktigt att nämna att pilen har en effekt att flytta från punkt till punkt:

FÖRSTORA

Med det här sista exemplet avslutar vi denna handledning, eftersom vi kunde se användningen av vektorer i våra kartor gör att vi kan öka deras funktionalitet och användbarhet, vilket ger oss möjlighet att implementera intressanta platser upp till alternativa vägar till de punkter som vi placerar i den .Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng