Vektoru izmantošana pakalpojumā Google Maps

Kartes, kas ģenerētas ar Google Maps Javascript API Tie ne vienmēr būs statiski, lai gan lielākoties tie tiek izmantoti vizualizācijai, tas ne vienmēr notiek, tāpēc dažreiz būs gadījumi, kad mums būs jāpaplašina to darbības joma, lai tajos varētu parādīt papildu informāciju.
Šī papildu informācija, kas mums jāiekļauj, tiek sasniegta ar vektors kas ir nekas cits kā formas, kas sastāv no punktiem, kur visu veidu vektori, ko izmanto API Tos sauc pārklājumi vai pārklājums.
IeteikumsIepriekšējās apmācībās mēs redzējām ievadu API, mēs pārskatījām vissvarīgākās iespējas un uzzinājām, kā iegūt akreditācijas datus izstrādātājiem Google un mēs veicam dažus vienkāršus tās izmantošanas piemērus, tādēļ, pirms izlasāt šīs apmācības saturu vai veicat šeit minētos piemērus, iesakām apskatīt šo pamācību.
Izlasot ieteikto apmācību un atrodoties kontekstā, pāriesim pie praktiskiem piemēriem, lai labāk izprastu vektoru izmantošanu mūsu kartēs, kas ģenerētas, izmantojot API.
Ar karti ģenerēto karšu izmantošana API tas visbiežāk tiek koncentrēts vietnēs, kur tā galvenā funkcija ir parādīt uzņēmuma vai uzņēmuma atrašanās vietu. To varam saukt par a interešu punkts ka mēs to bez problēmām varam attēlot ar vektoru veidu, kas Google Maps Javascript API ir pazīstams kā marķieris.
Bez papildu domām, aplūkosim darbības, kas mums jāveic, lai mūsu kartē ieviestu standarta marķieri un papildus pielāgotu.
1- Pirmā lieta, kas mums jādara, ir iekļaut API un mūsu kartes vizualizācijas stiliem, ir svarīgi atzīmēt, ka mums ir jāizmanto mūsu Google izstrādātāja akreditācijas dati šī parauga pareizai darbībai:

2- Mēs definējam savus globālos mainīgos, tā saukto karti un virkni mainīgo, kurus mēs izmantosim, lai ģenerētu nejaušus marķierus atbilstoši koordinātām, kas ieskauj apgabalu. Madride.:

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

3- Pēc tam mēs definējam savas kartes inicializācijas funkciju, kurā būs ietvertas vissvarīgākās iespējas tālummaiņa, bāzes veids kartei un centra koordinātas kas šajā gadījumā būs tās Madride, mēs saņemam ID no div ar SAULE, mēs inicializējam karti un definējam funkciju, lai apstrādātu notikumus, kad novietojam marķierus kartē, apskatīsim tikko aprakstīto koda segmentu:

 function initializeMap () {google.maps.visualRefresh = true; var mapOptions = {centrs: jauns google.maps.LatLng (40.41678, -3.70379), tālummaiņa: 5, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); karte = new google.maps.Map (mapElement, mapOptions); eventsMarker (); } 

4- Tagad mums jāveido sava funkcija eventsMarker () kuras definīcijā katram klikšķim būs piesaistīti divi notikumi saskaņā ar ID, kas tiek nospiests no divām dažādām saitēm, un kas izsauks vēl divas funkcijas, kas būs atbildīgas par grāmatzīmju iestatīšanu:

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

5- Pirms abu funkciju izveidošanas, kas noteiks marķierus, ir svarīgi nedaudz strādāt pie koordinātām, lai tās mums sniegtu nejaušas vērtības šajā diapazonā un tās varētu interpretēt Google Maps Javascript API, mēs to darīsim ar dažām aritmētiskām operācijām ar koordinātu globālajiem mainīgajiem, apskatīsim atbilstošo 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; atgriezt jaunu google.maps.LatLng (newLat, newLng); } 

6- Kad tas ir izdarīts, mēs varam izveidot savas funkcijas, lai piestiprinātu marķierus mūsu kartei, jo mēs to darām ar metodi Marķieris Lai ģenerētu standarta marķieri un ar iepriekšējo funkciju, mēs ģenerējam izlases koordinātu, kur tas tiks parādīts:

 funkcija addMarker () {var koordinātu = createLgRandom (); var marker = new google.maps.Marker ({pozīcija: koordināta, karte: karte, virsraksts: 'Random Marker -' + markerId}); markerId ++; } 

Pirms pāriet pie mūsu pielāgota grāmatzīme Ir svarīgi pieminēt, ka tā pamatā ir ikonas, un tām jābūt pieejamām mūsu projekta direktorijā, šim uzdevumam dažas no bezmaksas ikonām, kas pieejamas mapicons lapā, tika izmantotas kategorijā marķieri, tāpēc tie mums darbosies bez problēmām, tāpēc mēs dažus lejupielādējam un ievietojam mapē ar nosaukumu img atrodas mūsu projekta saknē, kā mēs varam redzēt šajā attēlā:

PALIELINĀT

7- Pēc ikonu iegūšanas mums tikai jāveido sava funkcija, tāpēc mēs izveidojam masīvu ar mūsu ikonu nosaukumiem, un mēs tos izpildīsim nejauši, piešķirot mūsu metodei papildu parametru Marķieris sauca ikona kas izmantos lejupielādēto attēlu, lai iestatītu marķieri:

 function addPersonMarker () {var markerIcons = ['komiksi', 'videospēles', 'datori', 'hotfood', 'bike_rising']; var rndMarkerId = Math.floor (Math.random () * markerIcons.length); var koordinate = createLaLgRandom (); var marker = new google.maps.Marker ({pozīcija: koordināta, karte: karte, ikona: 'img /' + markerIcons [rndMarkerId] + '.png.webp', nosaukums: 'Nejaušs marķieris -' + markerId}); markerId ++; } 

8- Visbeidzot, mēs pievienojam notikumu, lai inicializētu mūsu karti, un pirms mūsu div izveidojam divas saites ar saviem notikumiem definētajiem ID, kas izsauks atbilstošās funkcijas:

 google.maps.event.addDomListener (logs, 'ielādēt', inicializēt karti); Pievienojiet grāmatzīmes
Pievienot grāmatzīmi | Pievienot pielāgotu grāmatzīmi

Līdz ar to mums jau ir mūsu karte ar pievienošanas funkcionalitāti standarta marķieri Y pasūtījuma Atkarībā no tā, ko mēs izvēlamies, ir svarīgi pieminēt, ka mēs varam pievienot tik daudz grāmatzīmju, cik vēlamies, tas ļaus mums redzēt API darbību, lai pabeigtu, lai redzētu, kā tas izskatās, kad to palaižam savā pārlūkprogrammā:

PALIELINĀT

Visās tīmeklī atrodamajās lietojumprogrammās, kurās tiek parādīta karte, tās neizslēdz iespēju parādīt informāciju, kas saistīta ar punktu, uz kuru tās norāda, tāpēc mums ir iespēja pievienot uznirstošo logu vai nolaižamo logu lai parādītu informāciju saskaņā ar noteiktu atrašanās vietu mūsu kartē vai pat marķieri, redzēsim, kā mēs to varam izdarīt:
1- Mēs izveidosim jaunu failu add_popup.html un mēs izmantosim iepriekšējo piemēru kā pamatu, lai ievietotu jaunās funkcijas, šim nolūkam mēs kopējam un ielīmējam mūsu kartes kodu, un mēs meklēsim funkciju initializeMap () kur pēc ID iegūšanas mēs ar InfoWindow metodi definēsim uznirstošo logu mūsu kartes centram, redzēsim iepriekš minētās funkcionalitātes kodu:

 var infowindow = new google.maps.InfoWindow ({content: 'Uznirstošo logu saturs:
Šis uznirstošais logs parāda kartes centru, kas ir Madride', pozīcija: jauns google.maps.LatLng (40.41678, -3.70379)}); infowindow.open (karte); 

2- Tagad mēs mainīsim savu funkciju addMarker () lai pievienotu uznirstošo logu katram marķierim, kas parādās mūsu kartē, mēs šo funkciju izmantosim vēlreiz InfoWindow () un mēs pievienosim notikumu mainīgajam, ko definējam ar metodes instanci, apskatīsim:

 funkcija addMarker () {var koordinātu = createLgRandom (); var marker = new google.maps.Marker ({pozīcija: koordināta, karte: karte, virsraksts: 'Random Marker -' + markerId}); var infowindow = new google.maps.InfoWindow ({content: 'Marker Info Window - ID:' + markerId}); google.maps.event.addListener (marķieris, 'klikšķis', funkcija () {infowindow.open (karte, marķieris);}); markerId ++; } 

3- Kad tas būs izdarīts, redzēsim, kā izskatās mūsu karte ar tikko iekļauto uznirstošo logu funkcionalitāti:

PALIELINĀT

4- Visbeidzot, aplūkosim līdzīgu funkcionalitāti, ko piemērojam grāmatzīmēm, to darām, nospiežot saiti Pievienot grāmatzīmi:

PALIELINĀT

Kā redzējām, mūsu karšu un marķieru funkcionalitātes paplašināšana ir pavisam vienkārša, mums tikai jāizmanto atbilstošas ​​metodes, lai to sasniegtu.
Mēs jau esam pārbaudījuši vektoru jaudu, parādot interesējošos punktus kartē ar marķieriTomēr mēs varam izmantot vektorus, lai zīmētu līnijas un parādītu maršrutu starp diviem mūsu kartes punktiem, redzēsim, kā mēs to darām:
1- Mēs izveidosim failu ar nosaukumu add_line.html un mēs iekļausim mūsu API, kā arī pirmā piemēra stilus, tagad mēs definēsim koordinātas, kas iet no Madride uz Barselona, paskatīsimies:

 var koordinātas Line = [[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- Pirms pāriet pie mūsu kartes inicializācijas funkcijas, mēs vispirms izveidosim šo funkciju addLine () kur pirmā lieta, ko mēs darīsim, ir atkārtot koordinātu masīvu un izveidot jaunu masīvu, kurā būs tipa objekts LatLng, paskatīsimies:

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

3- Tad mēs savai līnijai iestatām tādas īpašības kā krāsa, necaurredzamība un biezums. Pēc tam mums vienkārši jānosūta uz metodi Polilīna opcijas kā parametru un iestatiet polilīnijas mainīgo uz pašreizējo karti:

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

4- Beidzot mēs izveidojam savu labi zināmo funkciju initializeMap () un tā vietā, lai tās beigās būtu funkcija MarkerEvents, mēs aizstāsim šo rindu ar mūsu funkcijas nosaukumu addLine (), mēs izveidojam savu HTML un izpildām to savā pārlūkprogrammā, tam vajadzētu izskatīties šādi:

PALIELINĀT

Iepriekšējā piemērā mēs savai kartei pievienojām līniju un tādējādi demonstrējam divu punktu savienību, lai parādītu maršrutu starp tiem, tomēr šajā piemērā, kaut arī tas ir ilustratīvs, tomēr kaut kā trūkst, un tas ir fakts, ka tiek parādīta mobilitāte starp šiem diviem punktiem , piemēram, braucoša automašīna.
Tas var šķist diezgan sarežģīti, bet tā nav, izmantojot klases un metodes API Mēs varam to atrisināt ar dažām koda rindām, redzēsim, kā mēs to darām:
1- Pirmā lieta ir iekļaut mūsu API, mūsu stili un mēs definējam savus globālos mainīgos, mēs izmantojam tās pašas iepriekšējā piemēra koordinātas, lai izmantotu to pašu ceļu, turklāt mēs definējam mainīgo polilīna kā globāls, lai varētu to izmantot pilnā apjomā Javascript:

 var karte; var polilīns; var koordinātas Line = [[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- Tagad mēs izveidojam savu funkciju addAnimatedLine () kam būs līdzīga funkcijas struktūra addLine () Tomēr no iepriekšējā piemēra šai funkcijai būs simbola definīcija, ko mēs izmantosim, lai parādītu kustīgo objektu starp šiem diviem punktiem, šajā gadījumā mēs izmantosim bultiņu:

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

3- Visbeidzot, mums tikai jāiestata šis mainīgais uz opciju ikonas no līnijas definīcijas:

 var lineOptions = {ceļš: linePath, ikonas: [{icon: bultiņas simbols}], strokeWeight: 3, strokeColor: '# 313cac', strokeOpacity: 0.8} 

4- Kad tas ir izdarīts, mums atliek tikai animēt savu ikonu, un mēs to darām funkcijā ar nosaukumu animateArrow () kas mums jāiekļauj funkcijas definīcijas beigās addAnimatedLine () Apskatīsim, ko šī funkcija satur:

 funkcija animateArrow () {var skaitītājs = 0; var accessVar = window.setInterval (function () {counter = (counter + 1)% 100; var bultas = polyline.get ('ikonas'); bultiņas [0]. offset = (skaitītājs / 2) + '%'; polyline.set ('ikonas', bultiņas);}, 50); } 

5- Lai pabeigtu, mēs inicializējam savu karti, kā mēs jau zinām, un izsaucam savu funkciju addAnimatedLine ()Paskatīsimies, izpildot, kā tas izskatās mūsu pārlūkprogrammā, ir svarīgi pieminēt, ka bultiņa pārvietojas no punkta uz punktu:

PALIELINĀT

Ar šo pēdējo piemēru mēs beidzam šo pamācību, jo mēs redzējām, ka vektoru izmantošana mūsu kartēs ļauj mums palielināt to funkcionalitāti un lietderību, dodot mums iespēju īstenot interesējošos punktus līdz alternatīviem maršrutiem līdz punktiem, kurus mēs tajā ievietojam .Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu