Употреба вектора у Гоогле мапама

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

2- Дефинишемо наше глобалне променљиве, такозвану мапу и низ променљивих које ћемо користити за генерисање случајних маркера према координатама које окружују подручје Мадрид.:

 вар мап; вар минЛат = 38, макЛат = 41, минЛнг = -3, макЛнг = -9, маркерИд = 1; 

3- Затим дефинишемо функцију иницијализације наше мапе, која ће садржати најважније опције за њу као зум, тип основе за мапу и координате центра које ће у овом случају бити оне од Мадрид, добијамо ИД од див од стране СУНЦЕ, покрећемо мапу и дефинишемо функцију за руковање догађајима када позиционирамо маркере на мапи, погледајмо сегмент кода који смо управо описали:

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

4- Сада морамо изградити своју функцију евентсМаркер () који ће у својој дефиницији имати два догађаја везана по клику према ИД -у који се притисне са две различите везе и који ће позвати још две функције које ће бити задужене за постављање обележивача:

 фунцтионМаркерЕвентс () {доцумент.гетЕлементБиИд ('адд_Маркер'). аддЕвентЛистенер ('клик', функција () {аддМаркер ();}); доцумент.гетЕлементБиИд ('адд_персон_Маркер'). аддЕвентЛистенер ('клик', функција () {аддПерсонМаркер ();}); } 

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

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

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

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

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

ЕНЛАРГЕ

7- Након што имамо иконе, морамо само изградити своју функцију, за то стварамо низ са именима наших икона и ми ћемо их покренути насумично, дајући додатни параметар нашој методи Маркер позвао икона који ће користити преузету слику за постављање маркера:

 функција аддПерсонМаркер () {вар маркерИцонс = ['цомицс', 'видеогамес', 'цомпутерс', 'хотфоод', 'бике_рисинг']; вар рндМаркерИд = Матх.флоор (Матх.рандом () * маркерИцонс.ленгтх); вар координате = цреатеЛаЛгРандом (); вар маркер = нев гоогле.мапс.Маркер ({положај: координата, мапа: мапа, икона: 'имг /' + маркерИцонс [рндМаркерИд] + '.пнг', наслов: 'Случајни маркер -' + маркерИд}); маркерИд ++; } 

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

 гоогле.мапс.евент.аддДомЛистенер (прозор, 'учитавање', иницијализацијска карта); Додајте обележиваче
Додај обележивач | Додајте прилагођену ознаку

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

ЕНЛАРГЕ

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

 вар инфовиндов = нев гоогле.мапс.ИнфоВиндов ({цонтент: 'Скочни садржај:
Овај скочни прозор приказује центар карте који је Мадрид', поситион: нев гоогле.мапс.ЛатЛнг (40.41678, -3.70379)}); инфовиндов.опен (мапа); 

2- Сада ћемо изменити нашу функцију аддМаркер () за додавање скочних прозора сваком маркеру који се појави на нашој мапи, за ово ћемо поново користити функцију ИнфоВиндов () и додаћемо догађај за променљиву коју дефинишемо помоћу инстанце методе, да видимо:

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

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

ЕНЛАРГЕ

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

ЕНЛАРГЕ

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

 вар координате Лине = [[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- Пре него што пређемо на функцију иницијализације наше мапе, прво ћемо креирати функцију аддЛине () где ће прва ствар коју ћемо урадити поновити низ координата и креирати нови низ који ће садржати објекат типа ЛатЛнг, Хајде да видимо:

 функција аддЛине () {вар поинтЦоунт = цоординатеЛине.ленгтх; вар линеПатх = []; за (вар и = 0; и <поинтЦоунт; и ++) {вар темпЛатЛнг = нови гоогле.мапс.ЛатЛнг (координатна линија [и] [0], координатна линија [и] [1]); линеПатх.пусх (темпЛатЛнг); } 

3- Затим постављамо својства за нашу линију, као што су боја, непрозирност и дебљина. Након што ово урадимо, потребно је само да пошаљемо методу Полилине опције као параметар и подесите променљиву полилиније на тренутну мапу:

 вар линеОптионс = {патх: линеПатх, строкеВеигхт: 7, строкеЦолор: '# 313цац', строкеОпацити: 0.8} вар полилине = нев гоогле.мапс.Полилине (линеОптионс); полилине.сетМап (мапа); } 

4- Коначно стварамо нашу добро познату функцију инитиализеМап () и уместо да на крају имамо функцију која се зове МаркерЕвентс, ову линију ћемо заменити именом наше функције аддЛине (), креирамо наш ХТМЛ и извршавамо га у прегледачу, требало би да изгледа овако:

ЕНЛАРГЕ

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

 вар мап; вар полилине; вар координате Лине = [[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- Сада стварамо своју функцију аддАниматедЛине () који ће имати структуру сличну функцији аддЛине () Из претходног примера, међутим, ова функција ће имати дефиницију симбола који ћемо користити за приказивање објекта у покрету између ове две тачке, за овај случај користићемо стрелицу:

 вар арровСимбол = {строкеЦолор: '# 000', сцале: 3, патх: гоогле.мапс.СимболПатх.ФОРВАРД_ЦЛОСЕД_АРРОВ}; 

3- Коначно, ову варијаблу морамо само поставити на опцију иконе из дефиниције линије:

 вар линеОптионс = {патх: линеПатх, ицонс: [{ицон: симбол стрелице}], строкеВеигхт: 3, строкеЦолор: '# 313цац', строкеОпацити: 0.8} 

4- Када се ово уради, потребно је само да анимирамо нашу икону и то радимо у функцији која се зове аниматеАрров () које морамо укључити на крају дефиниције функције аддАниматедЛине () Хајде да видимо шта функција садржи:

 функција аниматеАрров () {вар цоунтер = 0; вар аццессВар = виндов.сетИнтервал (фунцтион () {цоунтер = (цоунтер + 1)% 100; вар стрелице = полилине.гет ('иконе'); стрелице [0]. оффсет = (цоунтер / 2) + '%'; полилине.сет ('иконе', стрелице);}, 50); } 

5- За крај иницијализирамо нашу мапу како већ знамо и позивамо нашу функцију аддАниматедЛине ()Да видимо када извршавамо како изгледа у нашем прегледачу, важно је напоменути да стрелица има ефекат померања од тачке до тачке:

ЕНЛАРГЕ

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