Преглед садржаја
Услуге које нуди Јавасцрипт АПИ за Гоогле мапе су различити колико и функционални, имају квалитет који их разликује Гугл мапе Од својих конкурената, ове услуге углавном раде асинхроно, што омогућава слање захтева спољном серверу, а за обраду одговора задужен је метод повратног позива.Једна од предности ових услуга је та што су потпуно компатибилне са АПИ класама и објектима. Можемо од консултовања адресе одређене тачке на нашој мапи до чак примене погледа на улицу.
Пре него што пређемо на примере, погледајмо неке од најважнијих услуга које ћемо користити у овом водичу.
Гео кодирањеОва услуга нам омогућава да трансформишемо уобичајене адресе у географске координате на основу географске ширине и дужине тачке, омогућава нам постављање маркера или позиционирање наше карте, за извођење ових операција АПИ обезбеђује класу тзв. геокодер ().
Матрица удаљеностиОва услуга нам помаже да израчунамо удаљеност и трајање руте између више тачака, нешто што се данас широко користи, за то имамо сврху гоогле.мапс.ДистанцеМатрикСервице и сродне методе.
Приказ улицеСервице Приказ улице или поглед на улицу нуди нам панорамски поглед од 360 степени у областима где има покривеност, нешто по чему ће се наше карте без сумње истакнути.
Запамтите да сам овде детаљно описао рад АПИ -ја и руковање догађајима у Гоогле мапама и Увод да бих разумео Јавасцрипт АПИ у Гоогле мапама.
Да бисмо извели овај пример, користићемо услугу геокодер () Али као што смо споменули, ово нам омогућава да трансформишемо адресу у координату, то је у реду, али за конвенционалног корисника то је нешто што не види велику корист, зато ћемо користити обрнути геокодер да једним кликом дођемо до потребне адресе. Погледајмо кораке које морамо следити:
1- Прво, као што већ знамо, укључујемо АПИ, не заборављајући да користимо своје акредитиве, поред овога ћемо укључити и библиотеку цртање која ће нам омогућити имплементацију функционалности означавања цртежа, ову библиотеку повезујемо са акредитивом са & симболом као што ћемо видети у наставку:
2- Не можемо заборавити на стилове за мапу, који ће јој дати врсту визуализације на страници, као и дефинисање глобалних променљивих које ће имати глобални опсег у свим методама нашег кода:
вар мап; вар геокодер вар попуп;
3- Након тога дефинишемо наш метод инитиализеМап () где прво што ћемо учинити је да декларишемо наш објекат типа геокодер помажући нам са часа Геокодер () и са ИнфоВиндов објекат за скочни прозор који ће приказати адресу на екрану:
функција инитиализеМап () {геоцодер = нев гоогле.мапс.Геоцодер (); попуп = нев гоогле.мапс.ИнфоВиндов (); 4- Укључујемо конвенционалне опције карте као што су центар, зум и тип базе, добијамо елемент СУНЦЕ и ми инстанцирамо метод Мапа:
гоогле.мапс.висуалРефресх = труе; вар мапОптионс = {центар: нев гоогле.мапс.ЛатЛнг (40.41678, -3.70379), зоом: 10, мапТипеИд: гоогле.мапс.МапТипеИд.РОАДМАП}; вар мапЕлемент = доцумент.гетЕлементБиИд ("дивмап"); мап = нова гоогле.мапс.Мап (мапЕлемент, мапОптионс); 5- Сада креирамо менаџера за цртање који ће нам омогућити цртање маркера, за то ћемо направити инстанцу ДравингМанагер, чинимо га видљивим у корисничком интерфејсу и бирамо који ће се режими приказивати у контроли и у ком положају ће бити:
вар дравингМанагер = нови гоогле.мапс.дравинг.ДравингМанагер ({дравингМоде: нулл, дравингЦонтрол: труе, дравингЦонтролОптионс: {поситион: гоогле.мапс.ЦонтролПоситион.ТОП_ЦЕНТЕР, дравингМодес: [гоогле.мапс.дравинг.ОверлаиТипе.МАРКЕР]}}) ; 6- Сада омогућавамо новостворену функционалност, додајемо слушаоца за наш догађај и за извођење обрнути геокодер методом добијамо положај географске ширине и дужине нашег маркера гетПоситион ():
дравингМанагер.сетМап (мапа); гоогле.мапс.евент.аддЛистенер (дравингМанагер, 'маркерцомплете', функција (маркер) {вар маркерПоситион = маркер.гетПоситион (); 7- Да бисмо довршили обрнути геокодер користићемо услугу геокод () и поставићемо услов за проверу да ли услуга враћа важећи одговор ако то не урадимо, тако да корисник зна да није успео и ако је резултат тачан, позивамо нашу методу Прикажи адресу ():
геоцодер.геоцоде ({'латЛнг': маркерПоситион}, функција (резултати, статус) {иф (статус == гоогле.мапс.ГеоцодерСтатус.ОК) {иф (резултати) {СховАддресс (резултати [0], маркер);}} елсе {алерт ("Услуга није успела:" + статус);}}); 8- Коначно, морамо само да изградимо метод Прикажи адресу () који ће примити резултат нашег обрнутог геокодера и положај маркера, помоћу тога можемо успоставити центар и приказати информације о форматираној адреси без икаквих проблема:
функција СховАддресс (резултат, маркер) {мап.сетЦентер (маркер.гетПоситион ()); мап.сетЗоом (13); вар попупЦонтент = 'Адреса: '+ ресулт.форматтед_аддресс; попуп.сетЦонтент (попупЦонтент); попуп.опен (мапа, маркер); } 9- Затварамо одговарајуће ознаке и додајемо део ХТМЛ кода да довршимо наш пример:
Пронађите адресу на мапи једним кликом
10- Извршавамо у свом прегледачу и кликнемо на било коју тачку на мапи и добићемо адресу приказану у искачућем прозору који декларишемо, требало би да изгледа овако:
ЕНЛАРГЕ
Тхе Јавасцрипт АПИ за Гоогле мапе пружа нам прилично корисне услуге, једна од њих је матрица удаљености која нам омогућава израчунавање удаљености и времена између више тачака, функционалност коју можемо користити за имплементацију различитих решења у било ком послу, од израчунавања времена испоруке или успостављања најоптималније руте између различитих тачака. Погледајмо кораке које морамо да следимо да бисмо имплементирали ову функционалност између наших мапа.
1- Укључујемо наш АПИ заједно са библиотеком цртање, као и стилове за приказ наше карте и контејнера наше матрице:
2- Дефинишемо глобалне променљиве за употребу у целом опсегу нашег кода и у функцији инитиализеМап () Покрећемо низове за руковање географском ширином и дужином и полазишта и одредишта:
вар мап; вар оригинЛатЛон; вар дестинатионЛатЛон; вар дистанцеМатрикСервице; вар маркерЦоунт; вар арраиРесулт; функција инитиализеМап () {оригинЛатЛон = []; дестинатионЛатЛон = []; 3- Затим у истој функцији добијамо дугме и руковалац догађајима за њега, додатно иницијализујемо објекат за услугу ДистанцеМатрикСервице као и бројач за маркере и додели резултат низа у контејнер див:
вар генератедБтнМатрик = доцумент.гетЕлементБиИд ('генератедМатрик'); генератедБтнМатрик.аддЕвентЛистенер ('клик', функција () {МатрикРекуест ();}); дистанцеМатрикСервице = нова гоогле.мапс.ДистанцеМатрикСервице (); маркерЦоунт = 0; матрица резултата = доцумент.гетЕлементБиИд ('низ резултата'); 4- Укључујемо конвенционалне опције карте као што су центар, зум и тип базе, добијамо елемент СУНЦЕ и ми инстанцирамо метод Мапа:
гоогле.мапс.висуалРефресх = труе; вар мапОптионс = {центар: нев гоогле.мапс.ЛатЛнг (40.41678, -3.70379), зоом: 10, мапТипеИд: гоогле.мапс.МапТипеИд.РОАДМАП}; вар мапЕлемент = доцумент.гетЕлементБиИд ("дивмап"); мап = нова гоогле.мапс.Мап (мапЕлемент, мапОптионс); 5- Као што смо у претходној вежби створили менаџера за цртање који ће нам омогућити цртање маркера, за ово ћемо направити пример ДравингМанагер а ми пружамо потребне опције, омогућавамо га и додајемо слушаоца за догађај:
вар дравингМанагер = нови гоогле.мапс.дравинг.ДравингМанагер ({дравингМоде: нулл, дравингЦонтрол: труе, дравингЦонтролОптионс: {поситион: гоогле.мапс.ЦонтролПоситион.ТОП_ЦЕНТЕР, дравингМодес: [гоогле.мапс.дравинг.ОверлаиТипе.МАРКЕР]}}); дравингМанагер.сетМап (мапа); гоогле.мапс.евент.аддЛистенер (дравингМанагер, 'маркерцомплете', фунцтион (маркер) { 6- Након тога проводимо провјере како бисмо ограничили број дозвољених одредишта и поставили иконе које ћемо користити за своје ознаке:
маркерЦоунт ++; иф (маркерЦоунт> 10) {алерт ("Није дозвољено више одредишта"); дравингМанагер.сетМап (нулл); маркер.сетМап (нулл); ретурн; } иф (маркерЦоунт% 2 === 0) {дестинатионЛатЛон.пусх (маркер.гетПоситион ()); маркер.сетИцон ('имг / цомицс.пнг'); } елсе {оригинЛатЛон.пусх (маркер.гетПоситион ()); маркер.сетИцон ('имг / видеогамес.пнг'); }}); 7- Сада само морамо створити своје функције за обраду захтјева упућених служби дистанцеМатрикСервице, прво креирамо ону која ће припремити својство захтева:
фунцтионМатрикРекуест () {дистанцеМатрикСервице.гетДистанцеМатрик ({оригинс: ЛатинСоурце, дестинатионс: ЛатинДестини, травелМоде: гоогле.мапс.ТравелМоде.ДРИВИНГ,}, гетМатрикРесулт); } 8- Креирамо функцију повратног позива која ће нам омогућити да добијемо одговор услуге и у коју ћемо укључити неопходне провере у случају да услуга не реши грешку на најбољи начин:
функција гетРесултМатрик (резултат, статус) {ресултМатрик.иннерХТМЛ = ''; иф (статус == гоогле.мапс.ДистанцеМатрикСтатус.ОК) {вар оригинАддрессес = ресулт.оригинАддрессес; вар дестинатионАддрессес = ресулт.дестинатионАддрессес; фор (вар и = 0, л = оригинАддрессес.ленгтх; и <л; и ++) {вар елементс = ресулт.ровс [и] .елементс; фор (вар ј = 0, м = елементс.ленгтх; ј <м; ј ++) {вар оригинАддресс = оригинАддрессес [и]; вар дестинатионАддресс = дестинатионАддрессес [ј]; вар елемент = елементи [ј]; вар дистанце = елемент.дистанце.тект; вар дуратион = елемент.дуратион.тект; ресултсДивМатрик (оригинАддресс, дестинатионАддресс, дистанце, дуратион, и, ј); }}} елсе {алерт ('Није могуће добити низ:' + статус); } 9- Додатно креирамо функцију која ће уписивати резултате добијене у одговарајући див:
фунцтионДивМатрикРесултс (оригинАддресс, дестинатионАддресс, дистанце, дуратион, оригинАддрессЦоунт, дестинатионАддрессЦоунт) {вар екистингЦонтент = ресултРесулт.иннерХТМЛ; вар невЦонтент; невЦонтент = 'Порекло ' + цоунтЛеттерс (оригинАддрессЦоунт) +':
'; невЦонтент + = оригинАддресс + '
'; невЦонтент + = 'Одредиште „ + цоунтЛеттерс (дестинатионАддрессЦоунт) +“:
'; невЦонтент + = дестинатионАддресс + '
'; невЦонтент + = 'Судбина: ' + удаљеност +'
'; невЦонтент + = 'Судбина: „ + трајање +“
'; невЦонтент + = '
'; ресултАрраи.иннерХТМЛ = екистингЦонтент + невЦонтент; } 9- На крају у нашем Јавасцрипт Ми управљамо бројачима у функцији да вратимо име које одговара бројачу маркера који постављамо:
функција цоунтЛеттерс (цоунт) {свитцх (цоунт) {цасе 0: ретурн 'Цомицс Сторе'; случај 1: вратите „Продавницу видео игара“; случај 2: вратите „Продавницу стрипова“; случај 3: вратите „Продавницу стрипова“; случај 4: вратите „Продавницу видео игара“; подразумевано: ретурн нулл; }} 10- Затварамо одговарајуће ознаке и додајемо део кода ХТМЛ да употпунимо наш пример:
Користите матрицу удаљености
11- Наш пример извршавамо у прегледачу и да бисмо визуализовали рад наше мапе, поставићемо 4 тачке интереса и притиснути дугме Генериши матрицу удаљености:
ЕНЛАРГЕ
Да бисмо завршили овај водич, имплементираћемо услугу Приказ улице, То је прилично једноставан примјер, али додавањем осталим доступним услугама наше ће се мапе истакнути изнад осталих, да видимо шта морамо учинити да имплементирамо ову услугу:
1- Укључујемо АПИ и дефинишемо одговарајуће стилове, у овом примеру нећемо користити библиотеку за цртање па неће бити укључена:
2- Дефинишемо наше глобалне променљиве и креирамо своју функцију инитиализеМап () Уз конвенционалне опције, центар наше карте, зумирање и врсту базе, добијамо елемент СУНЦЕ и ми инстанцирамо метод Мапа:
вар мап; вар геокодер; вар стреетВиев; функција инитиализеМап () {попуп = нев гоогле.мапс.ИнфоВиндов (); геоцодер = нови гоогле.мапс.Геоцодер (); гоогле.мапс.висуалРефресх = труе; вар мапОптионс = {центар: нев гоогле.мапс.ЛатЛнг (40.41678, -3.70379), зоом: 10, мапТипеИд: гоогле.мапс.МапТипеИд.РОАДМАП}; вар мапЕлемент = доцумент.гетЕлементБиИд ("дивмап"); мап = нова гоогле.мапс.Мап (мапЕлемент, мапОптионс); 3- У оквиру наше функције називамо услугу Приказ улице и након тога креирамо функцију за постављање њених опција, попут локације и тачке гледишта:
стреетВиев = мап.гетСтреетВиев (); } функција сетОптионсСтреетВиев (локација) {стреетВиев.сетПоситион (локација); стреетВиев.сетПов ({заглавље: 0, свраб: 10}); } 4- На крају стварамо функције за пребацивање између конвенционалног приказа карте и Стреер Виев, да видимо како ово изгледа:
функција сховМап () {стреетВиев.сетВисибле (фалсе); } функција сховСтреетВиев () {сетСтреетВиевОптионс (мап.гетЦентер ()); стреетВиев.сетВисибле (труе); } 5- Затварамо одговарајуће ознаке и додајемо део кода ХТМЛ да употпунимо наш пример:
Мапа са Приказом улица
6- Покрећемо наш пример у прегледачу и притиснемо дугме Прикажи Стреет Виев за визуализацију функционалности као што видимо на следећој слици:
ЕНЛАРГЕ
Овим завршавамо овај водич, јер смо могли ценити услуге присутне у Јавасцрипт АПИ за Гоогле мапе Они нам омогућавају да много више проширимо функционалности наших карата, позиционирајући их као опцију коју треба узети у обзир у системима које имплементирамо, а за које је потребно користити прорачун локације и времена и / или удаљености.
Подсећам вас на овај водич који ће вам такође добро доћи: Научите да користите векторе у Гоогле мапамаДа ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен
