Utilizarea vectorilor în Google Maps

Hărțile generate cu API Google Maps Javascript Nu vor fi întotdeauna statice, deși sunt folosite de cele mai multe ori pentru vizualizare, acest lucru nu este întotdeauna cazul, de aceea uneori vor exista ocazii în care va trebui să le extindem domeniul de aplicare, astfel încât să poată afișa informații suplimentare în ele.
Aceste informații suplimentare pe care trebuie să le includem sunt obținute cu vector care nu sunt altceva decât forme formate din puncte, unde toate tipurile de vectori utilizați de API Ei sunt numiti, cunoscuti suprapuneri sau suprapunere.
RecomandareÎn tutoriale anterioare am văzut introducerea la API, am analizat cele mai importante opțiuni, am învățat cum să obținem acreditările pentru dezvoltatorii de Google și efectuăm câteva exemple simple de utilizare a acestuia, prin urmare, înainte de a citi conținutul acestui tutorial sau de a face exemplele menționate aici, vă recomandăm să aruncați o privire la acest tutorial.
După ce am trecut prin tutorialul recomandat și fiind în context, să trecem la exemplele practice, pentru o mai bună înțelegere a utilizării vectorilor în hărțile noastre generate cu API-ul.
Utilizarea hărților generate cu API este cel mai adesea concentrat pe site-uri web unde funcția sa principală este de a arăta locația unei companii sau afaceri. Putem numi asta a punct de interes că îl putem reprezenta fără nicio problemă cu un tip de vector, care în scopul API Google Maps Javascript este cunoscut ca marcator.
Fără alte întrebări, să vedem pașii pe care trebuie să-i urmăm pentru a implementa un marker standard și, în plus, unul personalizat în harta noastră.
1- Primul lucru pe care trebuie să-l facem este să includem API și stilurile pentru vizualizarea hărții noastre, este important să rețineți că trebuie să ne folosim Acreditări de dezvoltator Google pentru funcționarea corectă a acestui exemplu:

2- Ne definim variabilele globale, așa-numita hartă și o serie de variabile pe care le vom folosi pentru a genera markeri aleatori în funcție de coordonatele care înconjoară zona de Madrid.:

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

3- Apoi definim funcția de inițializare a hărții noastre, care va conține cele mai importante opțiuni pentru aceasta zoom, tipul de bază pentru hartă și coordonatele centrului care în acest caz vor fi cele ale Madrid, primim ID de div de către SOARE, inițializăm harta și definim o funcție pentru a gestiona evenimentele atunci când poziționăm markerii pe hartă, să analizăm segmentul de cod pe care tocmai l-am descris:

 funcția 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- Acum trebuie să ne construim funcția eventsMarker () care va avea în definiția sa două evenimente legate pe clic în funcție de ID-ul care este apăsat din două linkuri diferite și care va apela la alte două funcții care vor fi însărcinate cu setarea marcajelor:

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

5- Înainte de a construi cele două funcții care vor seta markerii, este important să se lucreze pe coordonate, astfel încât să ne ofere valori aleatorii în acest interval și să poată fi interpretate de API Google Maps Javascript, vom face acest lucru cu câteva operații aritmetice pe variabilele globale ale coordonatelor, să vedem funcția corespunzătoare:

 funcția 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; returnează google.maps.LatLng nou (newLat, newLng); } 

6- Odată ce acest lucru este făcut, ne putem construi funcțiile pentru a fixa markerii pe harta noastră, pentru aceasta o facem cu metoda Marker Pentru a genera un marker standard și cu funcția anterioară generăm coordonatele aleatorii unde va fi afișat:

 funcție addMarker () {var coordonate = createLgRandom (); var marker = new google.maps.Marker ({poziție: coordonată, hartă: hartă, titlu: 'Random Marker -' + markerId}); markerId ++; } 

Înainte de a trece la marcaj personalizat Este important de menționat că se bazează pe pictograme și acestea trebuie să fie disponibile în directorul proiectului nostru, pentru acest exercițiu unele dintre pictogramele gratuite disponibile pe pagina mapicons au fost utilizate în categoria marcatori, așa că vor funcționa pentru noi fără nicio problemă, pentru aceasta descărcăm câteva și le plasăm într-un folder numit img situat la rădăcina proiectului nostru așa cum putem vedea în următoarea imagine:

MARI

7- După ce avem pictogramele noastre, trebuie doar să ne construim funcția, pentru aceasta creăm o matrice cu numele pictogramelor noastre și le vom rula aleatoriu, dând un parametru suplimentar metodei noastre Marker numit pictogramă care va utiliza imaginea descărcată pentru a seta marcatorul:

 function addPersonMarker () {var markerIcons = ['benzi desenate', 'jocuri video', 'calculatoare', 'hotfood', 'bike_rising']; var rndMarkerId = Math.floor (Math.random () * markerIcons.length); var coordinate = createLaLgRandom (); var marker = new google.maps.Marker ({poziție: coordonată, hartă: hartă, pictogramă: 'img /' + markerIcons [rndMarkerId] + '.png.webp', title: 'Random Marker -' + markerId}); markerId ++; } 

8- În cele din urmă, adăugăm evenimentul pentru a ne inițializa harta și a crea două linkuri înainte de div cu ID-urile pe care le definim pentru evenimentele noastre care vor numi funcțiile corespunzătoare:

 google.maps.event.addDomListener (fereastră, 'încărcare', initializeMap); Adăugați marcaje
Adăugați marcaj | Adăugați un marcaj personalizat

Cu aceasta avem deja harta noastră cu funcționalitatea de a putea adăuga markeri standard Da personalizat În funcție de ceea ce selectăm, este important să menționăm că putem adăuga câte semne de carte dorim, acest lucru ne va permite să vedem funcționarea API-ului, pentru a termina să vedem cum arată când îl rulăm în browserul nostru:

MARI

În toate aplicațiile pe care le găsim pe web care afișează o hartă, acestea nu exclud posibilitatea de a afișa informații legate de punctul către care indică, de aceea avem posibilitatea de a adăuga o fereastră pop-up sau drop-down pentru a afișa informații în funcție de o anumită poziție pe harta noastră sau chiar un marker, să vedem cum putem face acest lucru:
1- Vom crea un fișier nou add_popup.html și vom folosi exemplul anterior ca bază pentru a insera noile funcționalități, pentru aceasta copiem și lipim codul hărții noastre și vom localiza funcția initializeMap () în cazul în care după obținerea ID-ului vom defini fereastra pop-up pentru centrul hărții noastre cu metoda InfoWindow, să vedem codul pentru funcționalitatea menționată mai sus:

 var infowindow = new google.maps.InfoWindow ({content: 'Conținut pop-up:
Acest popup afișează centrul hărții, care este Madrid', poziție: new google.maps.LatLng (40.41678, -3.70379)}); infowindow.open (hartă); 

2- Acum ne vom modifica funcția addMarker () pentru a adăuga un popup la fiecare marker care apare pe harta noastră, pentru aceasta vom folosi din nou funcția InfoWindow () și vom adăuga un eveniment pentru variabila pe care o definim cu instanța metodei, să vedem:

 funcție addMarker () {var coordonate = createLgRandom (); var marker = new google.maps.Marker ({poziție: coordonată, hartă: hartă, titlu: 'Random Marker -' + markerId}); var infowindow = new google.maps.InfoWindow ({content: 'Fereastra de informații despre marker - ID:' + markerId}); google.maps.event.addListener (marker, „clic”, funcție () {infowindow.open (hartă, marker);}); markerId ++; } 

3- Odată ce acest lucru este făcut, să vedem cum arată harta noastră cu funcționalitatea pop-up-ului pe care tocmai l-am inclus:

MARI

4- În cele din urmă, să vedem funcționalitatea similară pe care o aplicăm marcajelor noastre, facem acest lucru apăsând linkul Adaugă semn de carte:

MARI

După cum am putut vedea, extinderea funcționalității hărților și marcajelor noastre este destul de simplă, trebuie doar să folosim metodele adecvate pentru a o realiza.
Am testat deja puterea vectorilor arătând punctele de interes pe o hartă cu marcatoriCu toate acestea, putem folosi vectori pentru a desena linii și a arăta ruta dintre două puncte de pe harta noastră, să vedem cum o facem:
1- Vom crea un fișier numit add_line.html și vom include API-ul nostru, precum și stilurile primului exemplu, acum vom defini coordonatele care merg de la Madrid la Barcelona, sa vedem:

 coordonate var Linie = [[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- Înainte de a trece la funcția de inițializare a hărții noastre, vom crea mai întâi funcția addLine () unde primul lucru pe care îl vom face este să iterăm peste matricea de coordonate și să creăm un nou tablou care va conține un obiect de tip LatLng, sa vedem:

 funcție addLine () {var pointCount = coordonatăLine.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- Apoi stabilim proprietățile liniei noastre, cum ar fi culoarea, opacitatea și grosimea. După ce facem acest lucru, trebuie doar să trimitem metoda Polilinie opțiunile ca parametru și setați variabila polilinie pe harta curentă:

 var lineOptions = {cale: linePath, strokeWeight: 7, strokeColor: '# 313cac', strokeOpacity: 0,8} var polyline = new google.maps.Polyline (lineOptions); polyline.setMap (hartă); } 

4- În cele din urmă, ne creăm binecunoscuta funcție initializeMap () și în loc să avem o funcție numită MarkerEvents la sfârșitul acesteia, vom înlocui această linie cu numele funcției noastre addLine (), ne creăm codul HTML și îl executăm în browserul nostru, ar trebui să arate astfel:

MARI

În exemplul anterior adăugăm o linie pe harta noastră și astfel demonstrăm unirea a două puncte pentru a demonstra traseul dintre ele, totuși acestui exemplu, deși este ilustrativ, îi lipsește încă ceva și este faptul de a arăta mobilitatea între aceste două puncte , cum ar fi o mașină în mișcare.
Acest lucru poate suna destul de complicat, dar nu este, cu ajutorul claselor și metodelor API O putem rezolva cu câteva linii de cod, să vedem cum o facem:
1- Primul lucru este să-i includem pe al nostru API, stilurile noastre și ne definim variabilele globale, folosim aceleași coordonate ca în exemplul anterior pentru a folosi aceeași cale, în plus definim variabila polilinie ca global pentru a-l putea folosi în întregul domeniu al nostru Javascript:

 harta var; var polilinie; coordonate var Linie = [[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- Acum ne creăm funcția addAnimatedLine () care va avea o structură similară funcției addLine () Din exemplul anterior, însă, această funcție va avea definiția simbolului pe care îl vom folosi pentru a arăta obiectul în mișcare între aceste două puncte, pentru acest caz vom folosi o săgeată:

 var arrowSymbol = {strokeColor: '# 000', scară: 3, cale: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}; 

3- În cele din urmă, trebuie doar să setăm această variabilă la opțiune icoane din definiția liniei:

 var lineOptions = {cale: linePath, pictograme: [{pictogramă: simbol săgeată}], strokeWeight: 3, strokeColor: '# 313cac', strokeOpacity: 0.8} 

4- Odată ce acest lucru este făcut, trebuie doar să ne animăm pictograma și o facem în funcția numită animateArrow () pe care trebuie să le includem la sfârșitul definiției funcției addAnimatedLine () Să vedem ce conține funcția:

 funcția animateArrow () {var counter = 0; var accessVar = window.setInterval (function () {counter = (counter + 1)% 100; var sageti = polyline.get ('pictograme'); sageti [0] .offset = (counter / 2) + '%'; polyline.set („pictograme”, săgeți);}, 50); } 

5- Pentru a finaliza, ne inițializăm harta așa cum știm deja și numim funcția noastră addAnimatedLine ()Să vedem când executăm cum arată în browserul nostru, este important să menționăm că săgeata are un efect de mișcare de la punct la punct:

MARI

Cu acest ultim exemplu încheiem acest tutorial, deoarece am putut vedea că utilizarea vectorilor în hărțile noastre ne permite să le sporim funcționalitatea și utilitatea, oferindu-ne posibilitatea de a implementa puncte de interes până la rute alternative la punctele pe care le plasăm în el .V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv