Управљање догађајима у Гоогле мапама

Тхе Јавасцрипт АПИ за Гоогле мапе Изузетно је моћан јер не само да омогућава креирање мапа као таквих, већ можемо отићи и корак даље проширивањем његових функционалности и употребом вектора за додавање интересних тачака, падајућих прозора, линија и симулације рута.
Још једна од предности мапа које имплементирамо и ако смо икада радили са Јавасцрипт -ом су догађајима, који су језгро језика и задужени су за управљање интеракцијом корисника са веб локацијом, у овом конкретном случају интеракцијом са нашом мапом.
Пре него што пређемо на праксу, морамо прво упознати неке од теорија иза догађаја којима управља АПИ, ово користи простор имена гоогле.мапс.евент да раде са њима. Има статичке методе за преслушавање догађаја дефинисаних у АПИ -ју и контролеру аддЛистенер () да их региструјете.
Знајући ово, да видимо неке од најважнијих догађаја доступних у АПИ -ју и које ћемо користити у нашим примерима:
центер_цхангедОвај догађај се покреће када се промени својство центра мапе.
кликнитеОвај догађај се покреће када корисник кликне на мапу, важно је напоменути да искључује кликове на маркере или прозоре са информацијама.
превуцитеОвај догађај се више пута покреће када корисник превуче мапу.
моусемовеОвај догађај се покреће када корисник помери миша било где у контејнеру мапе.
десни кликОвај догађај се покреће када се покрене догађај контекстног менија ДОМ.
зоом_цхангедОвај догађај се активира када се промени својство зумирања мапе.
Важно је напоменути да иако ови догађаји могу изгледати као стандардни догађаји из СУНЦЕ нису, они су део Гоогле Мапс АПИ. Тиме се избегава проблем када прегледачи обрађују различите врсте догађаја за СУНЦЕ.
Пошто сте већ видели догађаје које највише користи АПИ Идемо на праксу да демонстрирамо њихову употребу у креирању наших мапа, први пример овог водича биће фокусиран на догађаје везане за промену својстава мапе, што ће нам омогућити да добијемо синхронизовану функционалност мапе, односно , имају карте са различитим основама које приказују исте информације без обзира на промене у њиховом центру или у њиховом зумирању.
Погледајмо кораке које морамо следити да бисмо постигли овај циљ:
1- Прво креирамо нову датотеку коју ћемо позвати синцхронизед_мапс.хтмл и проводимо укључивање АПИ -ја, заједно са стиловима које ће имати контејнер наших мапа, важно је дефинисати глобалне променљиве мапа јер ћемо их морати користити у целом опсегу програма:

 вар карта1, мапа2; 

2- Као што смо већ поменули, синхронизоваћемо две мапе са различитим основама, за то је потребно да направимо две функције које их иницијализују. Ове функције ће бити прилично сличне онима које смо савладали у прошлим водичима, међутим имаће руковање догађајима за постизање функције синхронизације, да видимо код прве функције:

 функција инитиализеМап1 () {вар мапОптионс = {центар: нев гоогле.мапс.ЛатЛнг (40.41678, -3.70379), зоом: 10, мапТипеИд: гоогле.мапс.МапТипеИд.РОАДМАП}; вар мапЕлемент = доцумент.гетЕлементБиИд ('дивмап'); мап1 = нова гоогле.мапс.Мап (мапЕлемент, мапОптионс); гоогле.мапс.евент.аддЛистенер (мап1, 'центер_цхангед', фунцтион () {мап2.сетЦентер (мап1.гетЦентер ());}); гоогле.мапс.евент.аддЛистенер (мап1, 'зоом_цхангед', фунцтион () {мап2.сетЗоом (мап1.гетЗоом ());}); } 

Као што видимо, имамо уобичајене опције наше мапе да дефинишемо центар, зум и базу, што је у овом случају ПЛАН, затим смо поставили опције на нашу мапу и на крају наше догађаје који су одговорни за добијање вредности својстава карте број 1 и њихово постављање на мапу број 2, за то ћемо користити догађаје центер_цхангед И зоом_цхангед ово нам омогућава синхронизацију.
3- Затим морамо креирати нашу функцију за иницијализацију друге мапе, код је сличан претходном, међутим догађаји ће се покренути од карте 2 до броја 1, а база ће бити ХИБРИД да покаже разлику између обоје:

 функција инитиализеМап2 () {вар мапОптионс2 = {центар: нев гоогле.мапс.ЛатЛнг (40.41678, -3.70379), зоом: 10, мапТипеИд: гоогле.мапс.МапТипеИд.ХИБРИД}; вар мапЕлемент2 = доцумент.гетЕлементБиИд ('мапДив2'); мап2 = нова гоогле.мапс.Мап (мапЕлемент2, мапОптионс2); гоогле.мапс.евент.аддЛистенер (мап2, 'центер_цхангед', фунцтион () {сетТимеоут (фунцтион () {мап1.сетЦентер (мап2.гетЦентер ());}, 10);}); гоогле.мапс.евент.аддЛистенер (мап2, 'зоом_цхангед', фунцтион () {сетТимеоут (фунцтион () {мап1.сетЗоом (мап2.гетЗоом ());}, 10);}); } 

4- На крају стварамо функцију за инстанцирање мапа која ће нам омогућити да направимо инстанцу оба, ми градимо наше ХТМЛ и ставили смо исту класу у дивс који ће садржати наше мапе:

 функција инитиализеМапс () {инитиализеМап1 (); инитиализеМап2 (); } гоогле.мапс.евент.аддДомЛистенер (виндов, 'лоад', инитиализеМапс); Синхронизоване мапе 

Хајде да видимо како изгледају наше синхронизоване мапе када изводимо вежбу у прегледачу:

ЕНЛАРГЕ

Важно је напоменути да ће се промене које направимо на једној карти одразити на другој и обрнуто, да видимо како то изгледа након што променимо својство центра и зумирања, јер остају потпуно исте, осим основе :

ЕНЛАРГЕ

Један од најпопуларнијих и најсвестранијих догађаја који можемо пронаћи је употреба миша као уређаја за унос информација и интеракцију са различитим елементима нашег интерфејса, на мапама се не разликује, можемо га користити за покретање различитих догађаја према на његову употребу, у овом примеру ћемо користити догађај цлицк да добијемо координате те одређене тачке, да видимо кораке које треба следити:
1- Креирамо нову датотеку под називом гет_цоординатес.хтмл и укључујемо наш АПИ заједно са стиловима:

2- Затим креирамо функцију инитиализеМап () као и обично, али ово ће имати нешто другачије и дефиниција је догађаја кликните у аддЛистенер заједно са имплементацијом дијалога који ће нам пружити информације о географској ширини и дужини места на ком кликнемо, да видимо:

 гоогле.мапс.евент.аддЛистенер (мап, 'цлицк', фунцтион (е) {иф (инфовиндов! = нулл) инфовиндов.цлосе (); инфовиндов = нев гоогле.мапс.ИнфоВиндов ({цонтент: 'Координате миша: 
Географска ширина: ' + е.латЛнг.лат () +'
Дужина: '+ е.латЛнг.лнг (), положај: е.латЛнг}); инфовиндов.опен (мапа); }); 

3- Коначно градимо своју ХТМЛ и дефинишемо наш контејнер за мапу:

 Добијање координата кликом миша

Када је наш код завршен, да видимо како наша мапа изгледа у нашем прегледачу када кликнемо на њу и прикажу се информације о ширини и дужини те тачке:

ЕНЛАРГЕ

Већ смо видели да можемо да добијемо географску ширину и дужину тачке само једним кликом миша, али ово можда није најтачније за добијање ових информација, па можемо да применимо решење које нам омогућава да визуализујемо географску ширину и дужина било које тачке кроз коју пролазимо показивач миша, да видимо:
1- Укључујемо наш АПИ и креирамо наше стилове за нашу мапу и за контролу која ће бити задужена за приказ информација о географској ширини и дужини:

2- Ми стварамо своју функцију инитиализеМап () као у претходним вежбама и дефинишемо параметре за нашу контролу где је иницијализујемо координатама 0.00 / 0.00:

 вар цонтролДив = доцумент.цреатеЕлемент ('див'); цонтролДив.цлассНаме = 'мапЦонтрол'; цонтролДив.ид = 'мапЦоординатес'; цонтролДив.иннерХТМЛ = 'Ширина / Дужина: 0.00 / 0.00'; 

3- Затим морамо створити контролу и додати је на нашу мапу, ово радимо помоћу гоогле.цонтролс, где можемо одредити позицију у којој ће се налазити, у овом случају ћемо користити РИГХТ_БОТТОМ што одговара у доњем десном делу и контејнеру где ће бити приказан:

мап.цонтролс [гоогле.мапс.ЦонтролПоситион.РИГХТ_БОТТОМ] .пусх (цонтролДив);

4- На крају дефинишемо наш догађај који ће бити тип моусемове и убациће текст у контролу информација које добијамо:

 гоогле.мапс.евент.аддЛистенер (мап, 'моусемове', фунцтион (е) {вар цоординатеТект = 'Лат / Лнг:' + е.латЛнг.лат (). тоФикед (6) + ' /' + е.латЛнг. лнг (). тоФикед (6); цонтролДив.иннерХТМЛ = цоординатеТект;}); 

Хајде да видимо како изгледа наша мапа са контролом да бисмо добили информације о географској ширини и дужини:

ЕНЛАРГЕ

За крај, да видимо мало сложенији пример, где нећемо користити само догађаје већ и векторе и контекстуални мени како бисмо кориснику дали начин да комуницира са нашом мапом на организованији и директнији начин, да видимо кораке које треба следити постићи наш циљ:
1- Креирамо датотеку под називом мену_цонтектуал.хтмл и укључујемо Јавасцрипт АПИ за Гоогле мапе, такође стварамо стилове за нашу мапу и контекстуални мени:

2- Пре стварања наше функције инитиализеМап () Морамо извршити неколико додатних корака, један од њих је креирање функције за дефинисање класе за контекстни мени, да видимо:

 фунцтион менуЦонтектуал (мап) {тхис.сетМап (мап); тхис.мап = мапа; тхис.мапДив = мап.гетДив (); тхис.менуДив = нулл; }; 

3- Када се ово уради, морамо створити опције за наш контекстуални мени и додати догађај који ће покренути сваки од њих када буде изабран, што ће, како ћемо замислити, бити кликните:

 менуЦонтектуал.прототипе = нев гоогле.мапс.ОверлаиВиев (); менуЦонтектуал.прототипе.драв = фунцтион () {}; менуЦонтектуал.прототипе.онАдд = фунцтион () {вар тхат = тхис; тхис.менуДив = доцумент.цреатеЕлемент ('див'); тхис.менуДив.цлассНаме = 'контекстни мени'; тхис.менуДив.иннерХТМЛ = 'Направи обележивач
Зоом
Ундо Зоом
'; тхис.гетПанес (). флоатПане.аппендЦхилд (тхис.менуДив); гоогле.мапс.евент.аддЛистенер (тхис.мап, 'цлицк', фунцтион (моусеЕвент) {тхат.хиде ();}); }; 

4- Да завршимо са контекстуалним менијем, потребно је само да додамо емисије и сакријемо акције, да видимо како наш део кода изгледа за ово:

 менуЦонтектуал.прототипе.схов = функција (координата) {вар прој = тхис.гетПројецтион (); вар моусеЦоордс = прој.фромЛатЛнгТоДивПикел (координата); вар лефт = Матх.флоор (моусеЦоордс.к); вар топ = Матх.флоор (моусеЦоордс.и); тхис.менуДив.стиле.дисплаи = 'блок'; тхис.менуДив.стиле.лефт = лефт + 'пк'; тхис.менуДив.стиле.топ = топ + 'пк'; тхис.менуДив.стиле.висибилити = 'видљив'; }; менуЦонтектуал.прототипе.хиде = фунцтион (к, и) {тхис.менуДив.стиле.висибилити = 'хидден'; } 

5- Када смо завршили са контекстуалним менијем, потребно је само да програмирамо функције за опције у нашем менију, а то су зумирање, поништавање зумирања и постављање маркера:

 функција доЗоом () {мап.сетЗоом (мап.гетЗоом () + 1); } функција ундоЗоом () {мап.сетЗоом (мап.гетЗоом () - 1); } функција цреатеМаркер () {вар маркер = нев гоогле.мапс.Маркер ({поситион: ластЦоординате, мап: мап, титле: 'Рандом Маркер'}); } 

6- Коначно иницијализујемо нашу мапу, где је важно створити контекстуални мени за нашу мапу и дефинишите главни догађај десни клик који ће се активирати десним кликом миша када се притисне:

 цонтектМену = нови менуЦонтектуал (мапа); гоогле.мапс.евент.аддЛистенер (мапа, 'десни клик', функција (е) {ластЦоординате = е.латЛнг; цонтектМену.схов (е.латЛнг);}); 

7- Ми стварамо своје ХТМЛ на конвенционалан начин и покренимо наш пример, да видимо како изгледа наш контекстни мени када кликнемо десним тастером миша на нашу мапу:

ЕНЛАРГЕ

Хајде сада да испробамо опције нашег контекстуалног менија, поставимо неке маркере и играмо се са зумирањем наше мапе, да видимо:

ЕНЛАРГЕ

Овим последњим примером завршавамо овај водич, научивши да се бавимо догађајима из Јавасцрипт АПИ за Гоогле мапе како бисмо постигли функционалности које повећавају корисничко искуство на мапама које стварамо, комбинујући напредне технике за постизање проширених и сложених функционалности које ће нашу мапу истаћи на било којој имплементираној веб локацији.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен