Vektorių naudojimas „Google“ žemėlapiuose

Žemėlapiai, sukurti naudojant „Google“ žemėlapių „Javascript“ API Jie ne visada bus statiški, nors dažniausiai jie naudojami vizualizacijai, o ne visada, todėl kartais pasitaikys atvejų, kai turėsime išplėsti jų taikymo sritį, kad juose būtų galima parodyti papildomos informacijos.
Ši papildoma informacija, kurią turime įtraukti, pasiekiama naudojant vektorius kurios yra ne kas kita, kaip figūros, susidedančios iš taškų, kur visų tipų vektoriai naudojami API Jie vadinami perdangos arba perdanga.
RekomendacijaAnkstesnėse pamokose matėme įvadą API, peržiūrėjome svarbiausias parinktis ir sužinojome, kaip gauti įgaliojimus kūrėjams „Google“ ir mes atliekame keletą paprastų jo naudojimo pavyzdžių, todėl prieš skaitydami šios pamokos turinį ar atlikdami čia paminėtus pavyzdžius, rekomenduojame pažvelgti į šią mokymo programą.
Peržiūrėję rekomenduojamą mokymo programą ir atsižvelgdami į kontekstą, pereikime prie praktinių pavyzdžių, kad geriau suprastume vektorių naudojimą mūsų žemėlapiuose, sukurtuose naudojant API.
Žemėlapių, sukurtų naudojant API dažniausiai ji sutelkta į svetaines, kuriose jos pagrindinė funkcija yra parodyti įmonės ar verslo vietą. Tai galime pavadinti a Lankytina vieta kad mes galime jį be problemų pavaizduoti naudodami vektoriaus tipą, kuris „Google“ žemėlapių „Javascript“ API yra žinomas kaip žymeklis.
Nesivaržydami, pažiūrėkime, kokius veiksmus turime atlikti, kad mūsų žemėlapyje įdiegtume standartinį ir papildomai pasirinktinį žymeklį.
1- Pirmas dalykas, kurį turime padaryti, yra įtraukti API ir mūsų žemėlapio vizualizavimo stilius, svarbu pažymėti, kad turime naudoti savo „Google“ kūrėjo kredencialas kad šis pavyzdys veiktų teisingai:

2- Mes apibrėžiame savo globalius kintamuosius, vadinamąjį žemėlapį ir kintamųjų seriją, kuriuos naudosime generuodami atsitiktinius žymenis pagal koordinates, supančias teritoriją Madridas.:

 var žemėlapis; var minLat = 38, maxLat = 41, minLng = -3, maxLng = -9, markerId = 1; 

3- Tada mes apibrėžiame savo žemėlapio inicijavimo funkciją, kurioje bus svarbiausios jo parinktys mastelio keitimas, bazinis žemėlapio tipas ir centro koordinatės kurie šiuo atveju bus tie Madridas, gauname ID iš div SAULĖ, mes inicijuojame žemėlapį ir apibrėžiame funkciją, skirtą įvykiams valdyti, kai išdėstome žymeklius žemėlapyje, pažvelkime į ką tik aprašytą kodo segmentą:

 function initializeMap () {google.maps.visualRefresh = true; var mapOptions = {centre: new google.maps.LatLng (40.41678, -3.70379), mastelis: 5, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); map = new google.maps.Map (mapElement, mapOptions); eventsMarker (); } 

4- Dabar turime sukurti savo funkciją eventsMarker () kurio apibrėžime bus du įvykiai, susieti su vienu paspaudimu pagal ID, kuris spaudžiamas iš dviejų skirtingų nuorodų, ir kurie iškvies dar dvi funkcijas, kurios bus atsakingos už žymių nustatymą:

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

5- Prieš kuriant dvi funkcijas, kurios nustatys žymenis, svarbu šiek tiek padirbėti prie koordinačių, kad jos suteiktų mums atsitiktines to diapazono vertes ir jas būtų galima interpretuoti „Google“ žemėlapių „Javascript“ API, tai padarysime atlikdami kai kurias aritmetines operacijas su globaliais koordinačių kintamaisiais, pažiūrėkime atitinkamą funkciją:

 function 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; grąžinti naują google.maps.LatLng (newLat, newLng); } 

6- Kai tai bus padaryta, mes galime sukurti savo funkcijas, kad pritvirtintume žymeklius prie mūsų žemėlapio, ir tai darome naudodami metodą Žymeklis Norėdami sukurti standartinį žymeklį ir naudodami ankstesnę funkciją, mes sugeneruojame atsitiktinę koordinatę, kurioje ji bus rodoma:

 function addMarker () {var koordinate = createLgRandom (); var marker = new google.maps.Marker ({pozicija: koordinatė, žemėlapis: žemėlapis, pavadinimas: 'Atsitiktinis žymeklis -' + markerId}); markerId ++; } 

Prieš pereinant prie mūsų pasirinktinė žymė Svarbu paminėti, kad ji pagrįsta piktogramomis ir jos turi būti pasiekiamos mūsų projekto kataloge, šiam pratimui atlikti kai kurios nemokamos piktogramos, esančios žemėlapių puslapyje, buvo naudojamos kategorijoje žymekliai, todėl jie mums veiks be jokių problemų, todėl kai kuriuos atsisiunčiame ir įdedame į aplanką pavadinimu img yra mūsų projekto šaknyje, kaip matome šiame paveikslėlyje:

DIDELIS

7- Turėdami savo piktogramas, turime tik sukurti savo funkciją, todėl sukuriame masyvą su mūsų piktogramų pavadinimais ir vykdysime juos atsitiktinai, suteikdami papildomą parametrą mūsų metodui Žymeklis paskambino piktogramą kuri naudos atsiųstą vaizdą žymekliui nustatyti:

 function addPersonMarker () {var markerIcons = ['komiksai', 'vaizdo žaidimai', 'kompiuteriai', 'karštas maistas', 'bike_rising']; var rndMarkerId = Math.floor (Math.random () * markerIcons.length); var koordinatė = createLaLgRandom (); var marker = new google.maps.Marker ({pozicija: koordinatė, žemėlapis: žemėlapis, piktograma: 'img /' + markerIcons [rndMarkerId] + '.png.webp', pavadinimas: 'Atsitiktinis žymeklis -' + markerId}); markerId ++; } 

8- Galiausiai pridedame įvykį, norėdami inicijuoti mūsų žemėlapį, ir prieš mūsų skyrių sukuriame dvi nuorodas su savo įvykiams nustatytais ID, kurie iškvies atitinkamas funkcijas:

 google.maps.event.addDomListener (langas, 'load', initializeMap); Pridėti žymių
Pridėti žymę | Pridėti pasirinktinę žymę

Turėdami tai, mes jau turime savo žemėlapį su galimybe pridėti standartiniai žymekliai Y paprotys Atsižvelgiant į tai, ką pasirenkame, svarbu paminėti, kad galime pridėti tiek žymių, kiek norime, tai leis mums pamatyti, kaip veikia API, ir pažiūrėkime, kaip ji atrodo, kai ją paleidžiame naršyklėje:

DIDELIS

Visose žiniatinklyje rastose programose, kuriose rodomas žemėlapis, jos neatmeta galimybės rodyti informaciją, susijusią su tašku, į kurį jie nurodo, todėl mes galime pridėti iššokantįjį arba išskleidžiamąjį langą norėdami parodyti informaciją pagal tam tikrą vietą mūsų žemėlapyje ar net žymeklį, pažiūrėkime, kaip tai galime padaryti:
1- Mes ketiname sukurti naują failą add_popup.html ir mes naudosime ankstesnį pavyzdį kaip pagrindą naujoms funkcijoms įterpti, tam nukopijuosime ir įklijuosime savo žemėlapio kodą ir surasime funkciją initializeMap () kur, gavę ID, su InfoWindow metodu nustatysime mūsų žemėlapio centro iššokantįjį langą, pažiūrėkime pirmiau minėtos funkcijos kodą:

 var infowindow = new google.maps.InfoWindow ({content: 'Iššokantis langas:
Šis iššokantis langas rodo žemėlapio centrą, kuris yra Madridas', pozicija: naujas google.maps.LatLng (40.41678, -3.70379)}); infowindow.open (žemėlapis); 

2- Dabar mes pakeisime savo funkciją addMarker () Norėdami pridėti iššokantįjį langą prie kiekvieno mūsų žemėlapyje rodomo žymeklio, tam mes vėl naudosime šią funkciją „InfoWindow“ () ir pridėsime įvykį kintamajam, kurį apibrėžiame naudodami metodo egzempliorių, pažiūrėkime:

 function addMarker () {var koordinate = createLgRandom (); var marker = new google.maps.Marker ({pozicija: koordinatė, žemėlapis: žemėlapis, pavadinimas: 'Atsitiktinis žymeklis -' + markerId}); var infowindow = new google.maps.InfoWindow ({content: 'Žymeklio informacijos langas - ID:' + markerId}); google.maps.event.addListener (žymeklis, 'spustelėkite', funkcija () {infowindow.open (žemėlapis, žymeklis);}); markerId ++; } 

3- Kai tai bus padaryta, pažiūrėkime, kaip atrodo mūsų žemėlapis, naudojant ką tik įtraukto iššokančio lango funkcijas:

DIDELIS

4- Galiausiai, pažiūrėkime į panašias funkcijas, kurias taikome savo žymėms, tai darome paspausdami nuorodą Pridėti žymą:

DIDELIS

Kaip matėme, išplėsti mūsų žemėlapių ir žymeklių funkcionalumą yra gana paprasta, mes tiesiog turime naudoti tinkamus metodus, kad tai pasiektume.
Mes jau išbandėme vektorių galią, žemėlapyje rodydami lankytinas vietas su žymekliaiTačiau mes galime naudoti vektorius, norėdami nubrėžti linijas ir parodyti maršrutą tarp dviejų mūsų žemėlapio taškų, pažiūrėkime, kaip tai darome:
1- Mes sukursime failą pavadinimu add_line.html ir mes įtraukiame savo API, taip pat pirmojo pavyzdžio stilius, dabar nustatysime koordinates, Madridas į Barselona, Pažiūrėkime:

 var koordinatės Linija = [[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- Prieš pereidami prie mūsų žemėlapio inicijavimo funkcijos, pirmiausia sukursime šią funkciją addLine () kur pirmas dalykas, kurį ketiname padaryti, yra pakartoti koordinačių masyvą ir sukurti naują masyvą, kuriame bus tipo objektas LatLng, Pažiūrėkime:

 funkcija addLine () {var pointCount = koordinatėsLine.length; var linePath = []; for (var i = 0; i <pointCount; i ++) {var tempLatLng = new google.maps.LatLng (koordinatinė eilutė [i] [0], koordinatinė eilutė [i] [1]); linePath.push (tempLatLng); } 

3- Tada mes nustatome savo linijos savybes, tokias kaip spalva, neskaidrumas ir storis. Tai atlikę, mes tiesiog turime nusiųsti į metodą Polilinė parinktis kaip parametrą ir nustatykite polilinijos kintamąjį į dabartinį žemėlapį:

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

4- Pagaliau sukuriame gerai žinomą funkciją initializeMap () ir užuot turėję funkciją, pavadintą „MarkerEvents“ jos pabaigoje, šią eilutę pakeisime savo funkcijos pavadinimu addLine (), mes kuriame savo HTML ir vykdome jį savo naršyklėje, jis turėtų atrodyti taip:

DIDELIS

Ankstesniame pavyzdyje mes pridėjome liniją prie savo žemėlapio ir taip parodome dviejų taškų sąjungą, kad parodytume maršrutą tarp jų, tačiau šiame pavyzdyje, nepaisant iliustratyvumo, vis tiek kažko trūksta ir tai rodo judumą tarp šių dviejų taškų , pavyzdžiui, važiuojantis automobilis.
Tai gali atrodyti gana sudėtinga, tačiau tai nėra padedama klasių ir metodų API Mes galime tai išspręsti keliomis kodo eilutėmis, pažiūrėkime, kaip tai darome:
1- Pirmas dalykas yra įtraukti mūsų API, mūsų stiliai ir mes apibrėžiame savo pasaulinius kintamuosius, tam pačiam keliui naudojame tas pačias ankstesnio pavyzdžio koordinates, be to, mes apibrėžiame kintamąjį polilinija kaip pasaulinis, kad galėtume jį naudoti visose mūsų srityse Javascript:

 var žemėlapis; var polyline; var koordinatės Linija = [[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- Dabar mes kuriame savo funkciją addAnimatedLine () kurios struktūra bus panaši į funkciją addLine () Tačiau iš ankstesnio pavyzdžio ši funkcija turės simbolio, kurį naudosime norėdami parodyti judantį objektą tarp šių dviejų taškų, apibrėžimą, šiuo atveju naudosime rodyklę:

 var arrowSymbol = {strokeColor: '# 000', skalė: 3, kelias: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}; 

3- Galiausiai turime tik nustatyti šį kintamąjį kaip parinktį piktogramos iš eilutės apibrėžimo:

 var lineOptions = {kelias: linePath, piktogramos: [{icon: rodyklės simbolis}], strokeWeight: 3, strokeColor: '# 313cac', strokeOpacity: 0.8} 

4- Kai tai bus padaryta, mums tereikia animuoti savo piktogramą ir tai darome naudodami funkciją animateArrow () kurią turime įtraukti funkcijos apibrėžimo pabaigoje addAnimatedLine () Pažiūrėkime, ką sudaro ši funkcija:

 funkcija animateArrow () {var skaitiklis = 0; var accessVar = window.setInterval (function () {counter = (counter + 1)% 100; var rodyklės = polyline.get ('piktogramos'); rodyklės [0] .offset = (skaitiklis / 2) + '%'; polyline.set ('piktogramos', rodyklės);}, 50); } 

5- Baigdami inicializuojame žemėlapį, kaip jau žinome, ir vadiname savo funkcija addAnimatedLine ()Pažiūrėkime, kaip vykdome, kaip tai atrodo mūsų naršyklėje, svarbu paminėti, kad rodyklė gali judėti iš taško į tašką:

DIDELIS

Šiuo paskutiniu pavyzdžiu baigiame šią pamoką, nes matėme, kad vektorių naudojimas mūsų žemėlapiuose leidžia mums padidinti jų funkcionalumą ir naudingumą, suteikiant mums galimybę įgyvendinti lankytinus objektus iki alternatyvių maršrutų iki taškų, kuriuos mes jame įtraukiame .Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką