Notikumu apstrāde pakalpojumā Google Maps

Google Maps Javascript API Tas ir ārkārtīgi spēcīgs, jo tas ne tikai ļauj izveidot kartes kā tādas, bet mēs varam iet soli tālāk, paplašinot tās funkcijas un izmantojot vektorus, lai pievienotu interesējošos punktus, nolaižamos logus, līnijas un maršruta simulāciju.
Vēl viena no mūsu ieviesto karšu priekšrocībām un, ja mēs kādreiz esam strādājuši ar Javascript, ir notikumiem, kas ir valodas kodols un ir atbildīgi par lietotāja mijiedarbības ar vietni pārvaldīšanu, šajā konkrētajā gadījumā mijiedarbību ar mūsu karti.
Pirms došanās uz praksi mums vispirms ir jāzina dažas teorijas par notikumiem, kurus apstrādā API, tas izmanto nosaukumvietu google.maps.event strādāt ar viņiem. Tam ir statiskas metodes, lai uzklausītu notikumus, kas definēti API un kontrollerī addListener () lai tos reģistrētu.
Zinot to, apskatīsim dažus no vissvarīgākajiem notikumiem, kas pieejami API un kurus mēs izmantosim savos piemēros:
centrs_izmainītsŠis notikums tiek aktivizēts, kad tiek mainīts kartes centra rekvizīts.
klikšķisŠis notikums tiek aktivizēts, kad lietotājs noklikšķina uz kartes. Ir svarīgi pieminēt, ka tas izslēdz klikšķus uz marķieriem vai informācijas logiem.
vilktŠis notikums tiek atkārtoti aktivizēts, kad lietotājs velk karti.
peles kustībaŠis notikums tiek aktivizēts, kad lietotājs pārvieto peli jebkurā vietā kartes konteinerā.
ar peles labo pogu noklikšķinietŠis notikums tiek aktivizēts, kad tiek aktivizēts DOM konteksta izvēlnes notikums.
zoom_changedŠis notikums tiek aktivizēts, mainoties kartes tālummaiņas īpašībai.
Ir svarīgi pieminēt, ka, lai gan šie notikumi var izskatīties kā standarta notikumi SAULE tie nav, tie ir daļa no Google Maps API. Lai izvairītos no problēmas, kad pārlūkprogrammas apstrādā dažāda veida notikumus SAULE.
Jau redzot notikumus, kurus visbiežāk izmanto API Dosimies praksē, lai parādītu to izmantošanu mūsu karšu veidošanā, pirmais šīs apmācības piemērs būs vērsts uz notikumiem, kas saistīti ar kartes rekvizītu maiņu, kas ļaus mums iegūt sinhronizētu kartes funkcionalitāti, tas ir, , ir kartes ar dažādu bāzi, kas parāda to pašu informāciju neatkarīgi no izmaiņām to centrā vai tālummaiņā.
Apskatīsim soļus, kas mums jāveic, lai sasniegtu šo mērķi:
1- Vispirms mēs izveidojam jaunu failu, uz kuru mēs piezvanīsim synchronized_maps.html un mēs iekļaujam API, kā arī mūsu karšu konteinera stilus, ir svarīgi definēt karšu globālos mainīgos, jo mums tie būs jāizmanto visā programmas darbības jomā:

 var karte1, karte2; 

2- Kā jau iepriekš minējām, mēs sinhronizēsim divas kartes ar dažādām bāzēm, tāpēc mums ir jāizveido divas funkcijas, kas tās inicializē. Šīs funkcijas būs diezgan līdzīgas tām, kuras esam apguvuši iepriekšējās apmācībās, tomēr tām būs jāapstrādā notikumi, lai sasniegtu sinhronizācijas funkcionalitāti, apskatīsim pirmās funkcijas kodu:

 function initializeMap1 () {var mapOptions = {centrs: jauns google.maps.LatLng (40.41678, -3.70379), tālummaiņa: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); map1 = new google.maps.Map (mapElement, mapOptions); google.maps.event.addListener (map1, 'center_changed', function () {map2.setCenter (map1.getCenter ());}); google.maps.event.addListener (map1, 'zoom_changed', function () {map2.setZoom (map1.getZoom ());}); } 

Kā redzam, mums ir savas kartes iespējas kā parasti, lai definētu centru, tālummaiņu un bāzi, kas šajā gadījumā ir Ceļa karte, tad mēs savai kartei iestatām opcijas un visbeidzot savus notikumus, kas ir atbildīgi par kartes numura 1 īpašību vērtību iegūšanu un to iestatīšanu uz kartes numuru 2, šim nolūkam mēs izmantosim centrs_izmainīts Y zoom_changed tas ļauj mums sinhronizēties.
3- Tad mums ir jāizveido mūsu funkcija, lai inicializētu otro karti, kods ir līdzīgs iepriekšējam, tomēr notikumi tiks aktivizēti no kartes numura 2 uz numuru 1 un bāze būs HIBRĪDS lai parādītu atšķirību starp abiem:

 function initializeMap2 () {var mapOptions2 = {centrs: jauns google.maps.LatLng (40.41678, -3.70379), tālummaiņa: 10, mapTypeId: google.maps.MapTypeId.HYBRID}; var mapElement2 = document.getElementById ('mapDiv2'); karte2 = jauns google.maps.Map (mapElement2, mapOptions2); google.maps.event.addListener (map2, 'center_changed', function () {setTimeout (function () {map1.setCenter (map2.getCenter ());}, 10);}); google.maps.event.addListener (map2, 'zoom_changed', function () {setTimeout (function () {map1.setZoom (map2.getZoom ());}, 10);}); } 

4- Visbeidzot, mēs izveidojam funkciju karšu eksponēšanai, kas ļaus mums izveidot abu piemēru, mēs veidojam savu HTML un mēs nododam to pašu klasi diviem, kuros būs mūsu kartes:

 function initializeMaps () {initializeMap1 (); initializeMap2 (); } google.maps.event.addDomListener (logs, 'ielādēt', inicializēt kartes); Sinhronizētās kartes 

Redzēsim, kā izskatās mūsu sinhronizētās kartes, veicot vingrinājumu pārlūkprogrammā:

PALIELINĀT

Ir svarīgi pieminēt, ka izmaiņas, ko veicam vienā kartē, tiks atspoguļotas otrā un otrādi. Paskatīsimies, kā tas izskatās pēc centra rekvizītu maiņas un tālummaiņas, jo tās paliek tieši tādas pašas, izņemot bāzi :

PALIELINĀT

Viens no populārākajiem un daudzpusīgākajiem notikumiem, ko mēs varam atrast, ir peles izmantošana kā ierīce informācijas ievadīšanai un mijiedarbībai ar dažādiem mūsu saskarnes elementiem, kartēs tas neatšķiras, mēs varam to izmantot, lai izraisītu dažādus notikumus atbilstoši Lai to izmantotu, šajā piemērā mēs izmantosim klikšķa notikumu, lai iegūtu šī konkrētā punkta koordinātas. Apskatīsim, kādas darbības jāveic:
1- Mēs izveidojam jaunu failu ar nosaukumu get_coordinates.html un mēs iekļaujam savu API kopā ar stiliem:

2- Tad mēs izveidojam funkciju initializeMap () kā parasti, bet tam būs kaut kas cits, un tā ir notikuma definīcija klikšķis iekš addListener kopā ar dialoga ieviešanu, kas mums sniegs informāciju par klikšķu platuma un garuma punktiem, apskatīsim:

 google.maps.event.addListener (karte, 'klikšķis', funkcija (e) {if (infowindow! = null) infowindow.close (); infowindow = new google.maps.InfoWindow ({content: 'Peles koordinātas: 
Platums: ' + e.latLng.lat () +'
Garums: '+ e.latLng.lng (), pozīcija: e.latLng}); infowindow.open (karte); }); 

3- Beidzot mēs veidojam savu HTML un mēs definējam mūsu konteineru kartei:

 Koordinātu iegūšana ar peles klikšķi

Kad mūsu kods ir pabeigts, redzēsim, kā mūsu karte izskatās mūsu pārlūkprogrammā, noklikšķinot uz tās, un tiek parādīta šī punkta platuma un garuma informācija:

PALIELINĀT

Mēs jau esam redzējuši, ka mēs varam iegūt punkta platumu un garumu tikai ar peles klikšķi, taču tas var nebūt visprecīzākais šīs informācijas iegūšanai, tāpēc mēs varam ieviest risinājumu, kas ļauj mums vizualizēt platumu un jebkura punkta garums, caur kuru mēs izlaižam peles rādītāju, redzēsim:
1- Mēs iekļaujam savu API un veidojam savus stilus savai kartei un kontrolei, kas būs atbildīga par platuma un garuma informācijas parādīšanu:

2- Mēs veidojam savu funkciju initializeMap () tāpat kā iepriekšējos vingrinājumos, un mēs definējam savas kontroles parametrus, kur mēs to inicializējam ar koordinātām 0.00 / 0.00:

 var controlDiv = document.createElement ('div'); controlDiv.className = 'mapControl'; controlDiv.id = 'mapCoordinates'; controlDiv.innerHTML = 'Lat / Lng: 0.00 / 0.00'; 

3- Tad mums ir jāizveido vadīkla un jāpievieno tā mūsu kartei, mēs to darām ar google.controls, kur mēs varam norādīt pozīciju, kurā tas būs, šajā gadījumā mēs izmantosim RIGHT_BOTTOM kas atbilst apakšējā labajā daļā un konteinerā, kur tas tiks parādīts:

map.controls [google.maps.ControlPosition.RIGHT_BOTTOM] .push (controlDiv);

4- Visbeidzot, mēs definējam savu notikumu, kas būs šāda veida peles kustība un tas ievadīs tekstu, lai kontrolētu iegūto informāciju:

 google.maps.event.addListener (karte, 'mousemove', funkcija (e) {var koordinateText = 'Lat / Lng:' + e.latLng.lat (). toFixed (6) + ' /' + e.latLng. lng (). toFixed (6); controlDiv.innerHTML = koordinatteksts;}); 

Apskatīsim, kā izskatās mūsu karte, izmantojot vadīklu, lai iegūtu informāciju par platumu un garumu:

PALIELINĀT

Visbeidzot, aplūkosim nedaudz sarežģītāku piemēru, kurā mēs izmantosim ne tikai notikumus, bet arī vektorus un konteksta izvēlni, lai sniegtu lietotājam iespēju sazināties ar mūsu karti organizētākā un tiešākā veidā. sasniegt mūsu mērķi:
1- Mēs izveidojam failu ar nosaukumu menu_contextual.html un mēs iekļaujam Google Maps Javascript API, mēs arī veidojam mūsu kartes un konteksta izvēlnes stilus:

2- Pirms mūsu funkcijas izveides initializeMap () Mums ir jāveic dažas papildu darbības, no kurām viena ir izveidot funkciju, lai definētu konteksta izvēlnes klasi. Apskatīsim:

 funkciju izvēlneKontekstuāls (karte) {this.setMap (karte); this.map = karte; this.mapDiv = map.getDiv (); this.menuDiv = null; }; 

3- Kad tas ir izdarīts, mums ir jāizveido savas konteksta izvēlnes opcijas un jāpievieno notikums, kas aktivizēs katru no tiem, kad tas tiks atlasīts. klikšķis:

 menuContextual.prototype = new google.maps.OverlayView (); menuContextual.prototype.draw = function () {}; menuContextual.prototype.onAdd = function () {var that = this; this.menuDiv = document.createElement ('div'); this.menuDiv.className = 'konteksta izvēlne'; this.menuDiv.innerHTML = 'Izveidot grāmatzīmi
Tālummaiņa
Atsaukt tālummaiņu
'; this.getPanes (). floatPane.appendChild (this.menuDiv); google.maps.event.addListener (this.map, 'click', function (mouseEvent) {that.hide ();}); }; 

4- Lai pabeigtu konteksta izvēlni, mums ir jāpievieno tikai šovs un jāslēpj darbības. Apskatīsim, kā izskatās mūsu koda daļa:

 menuContextual.prototype.show = function (coord) {var proj = this.getProjection (); var mouseCoords = proj.fromLatLngToDivPixel (saskaņot); var pa kreisi = Math.floor (mouseCoords.x); var top = Math.floor (mouseCoords.y); this.menuDiv.style.display = 'bloks'; this.menuDiv.style.left = pa kreisi + 'px'; this.menuDiv.style.top = augšā + 'px'; this.menuDiv.style.visibility = 'redzams'; }; menuContextual.prototype.hide = function (x, y) {this.menuDiv.style.visibility = 'slēpts'; } 

5- Kad esam pabeiguši kontekstuālo izvēlni, mums tikai jāprogrammē funkcijas mūsu izvēlnes opcijām, kas ir tālummaiņa, tālummaiņas atsaukšana un marķiera ievietošana:

 funkcija doZoom () {map.setZoom (map.getZoom () + 1); } funkcija undoZoom () {map.setZoom (map.getZoom () - 1); } function createMarker () {var marker = new google.maps.Marker ({position: lastCoordinate, map: map, title: 'Random Marker'}); } 

6- Visbeidzot, mēs inicializējam savu karti, kur šeit ir svarīgi izveidot konteksta izvēlne mūsu kartei un definēt galveno notikumu ar peles labo pogu noklikšķiniet kas tiks aktivizēts ar peles labo pogu, nospiežot:

 konteksta izvēlne = jauna izvēlneKontekstuāls (karte); google.maps.event.addListener (karte, 'rightclick', funkcija (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);}); 

7- Mēs veidojam savu HTML parastajā veidā un izmantojiet mūsu piemēru, redzēsim, kā izskatās mūsu konteksta izvēlne, ar peles labo pogu noklikšķinot uz mūsu kartes:

PALIELINĀT

Tagad izmēģināsim mūsu konteksta izvēlnes iespējas, ievietojot dažus marķierus un spēlējoties ar mūsu kartes tālummaiņu, redzēsim:

PALIELINĀT

Ar šo pēdējo piemēru mēs beidzam šo apmācību, iemācījušies rīkoties ar notikumiem Google Maps Javascript API lai sasniegtu funkcionalitāti, kas palielina lietotāju pieredzi mūsu izveidotajās kartēs, apvienojot uzlabotas metodes, lai sasniegtu paplašinātas un sarežģītas funkcijas, kas padarīs mūsu karti izcilu jebkurā vietnē, kas tiek ieviesta.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