Съдържание
Картите, генерирани с API на Google Maps Javascript Те не винаги ще бъдат статични, въпреки че през повечето време се използват за визуализация, това не винаги е така, затова понякога ще има случаи, когато ще трябва да разширим обхвата им, така че да могат да показват допълнителна информация в тях.Тази допълнителна информация, която трябва да включим, се постига с вектор които не са нищо повече от форми, състоящи се от точки, където всички видове вектори, използвани от API Те се наричат наслагвания или наслагване.
ПрепоръкаВ предишни уроци видяхме въвеждането API, прегледахме най -важните опции, научихме как да получим идентификационните данни за разработчиците на Google и ние изпълняваме някои прости примери за неговото използване, затова преди да прочетете съдържанието на този урок или да направите споменатите тук примери, препоръчваме да разгледате този урок.
След като преминахме препоръчания урок и бяхме в контекста, нека преминем към практическите примери, това за по -добро разбиране на използването на вектори в нашите карти, генерирани с API.
Използването на картите, генерирани с API най -често се концентрира върху уебсайтове, където основната му функция е да показва местоположението на фирма или бизнес. Можем да наречем това а гледна точка че можем да го представим без проблем с тип вектор, който за целите на API на Google Карти Javascript Е познат като маркер.
Без повече шум, нека видим стъпките, които трябва да следваме, за да внедрим стандартен маркер и допълнително персонализиран в нашата карта.
1- Първото нещо, което трябва да направим, е да включим API и стиловете за визуализация на нашата карта, важно е да се отбележи, че трябва да използваме нашата Идентификационни данни за програмисти на Google за правилната работа на този пример:
2- Определяме нашите глобални променливи, така наречената карта и поредица от променливи, които ще използваме за генериране на случайни маркери според координатите, които обграждат областта на Мадрид.:
var карта; var minLat = 38, maxLat = 41, minLng = -3, maxLng = -9, markerId = 1;
3- След това определяме функцията за инициализация на нашата карта, която ще съдържа най -важните опции за нея като мащабиране, основен тип за карта и централни координати които в този случай ще бъдат тези на Мадрид, получаваме документ за самоличност на div от СЛЪНЦЕ, ние инициализираме картата и дефинираме функция за обработка на събитията, когато позиционираме маркерите на картата, нека да разгледаме кодовия сегмент, който току -що описахме:
функция initializeMap () {google.maps.visualRefresh = вярно; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); map = new google.maps.Map (mapElement, mapOptions); eventsMarker (); } 4- Сега трябва да изградим нашата функция eventsMarker () което ще има в своята дефиниция две събития, свързани на кликване според идентификатора, който е натиснат от две различни връзки и който ще извика още две функции, които ще бъдат отговорни за настройката на отметките:
functionMarkerEvents () {document.getElementById ('add_Marker'). addEventListener ('щракване', function () {addMarker ();}); document.getElementById ('add_person_Marker'). addEventListener ('щракване', функция () {addPersonMarker ();}); } 5- Преди да конструирате двете функции, които ще зададат маркерите, е важно да направите малко работа по координатите, така че те да ни предоставят случайни стойности в този диапазон и те да могат да бъдат интерпретирани от API на Google Карти Javascript, ще направим това с някои аритметични операции върху глобалните променливи на координатите, нека видим съответната функция:
функция 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; връщане на нов google.maps.LatLng (newLat, newLng); } 6- След като това е направено, можем да изградим нашите функции, за да фиксираме маркерите към нашата карта, за това го правим с метода Маркер За да генерираме стандартен маркер и с предишната функция генерираме случайната координата, където тя ще се показва:
функция addMarker () {var координата = createLgRandom (); var marker = new google.maps.Marker ({позиция: координата, карта: карта, заглавие: 'Случайна отметка -' + markerId}); markerId ++; } Преди да преминем към нашия персонализирана отметка Важно е да се спомене, че то се основава на икони и те трябва да са налични в директорията на нашия проект, за това упражнение някои от безплатните икони, налични на страницата с картички, бяха използвани в категорията маркери, така че те ще работят за нас без никакви проблеми, за това изтегляме някои и ги поставяме в папка, наречена img разположен в основата на нашия проект, както можем да видим на следното изображение:
Увеличете
функция addPersonMarker () {var markerIcons = ['комикси', 'видеоигри', 'компютри', 'hotfood', 'bike_rising']; var rndMarkerId = Math.floor (Math.random () * markerIcons.length); var координата = createLaLgRandom (); var marker = new google.maps.Marker ({позиция: координата, карта: карта, икона: 'img /' + markerIcons [rndMarkerId] + '.png.webp', заглавие: 'Случайна отметка -' + markerId}); markerId ++; } 8- Накрая добавяме събитието, за да инициализираме нашата карта и да създадем две връзки преди нашия div с идентификаторите, които определяме за нашите събития, които ще извикват съответните функции:
google.maps.event.addDomListener (прозорец, 'зареждане', InitilizeMap); Добавете отметки
Добавяне на отметка | Добавяне на персонализиран маркер
С това вече имаме нашата карта с функционалността да можем да добавяме стандартни маркери Y персонализиран Според това, което избираме, е важно да споменем, че можем да добавим толкова отметки, колкото искаме, това ще ни позволи да видим работата на API, за да завършим, нека видим как изглежда, когато го стартираме в браузъра си:
Увеличете
1- Ще създадем нов файл add_popup.html и ще използваме предишния пример като основа за вмъкване на новите функционалности, за това копираме и поставяме кода на нашата карта и ще намерим функцията initializeMap () където след получаване на идентификационния номер ще определим изскачащия прозорец за центъра на нашата карта с метода InfoWindow, нека видим кода за гореспоменатата функционалност:
var infowindow = нов google.maps.InfoWindow ({съдържание: 'Изскачащо съдържание:
Този изскачащ прозорец показва центъра на картата, който е Мадрид', позиция: нов google.maps.LatLng (40.41678, -3.70379)}); infowindow.open (карта); 2- Сега ще променим нашата функция addMarker () за да добавим изскачащ прозорец към всеки маркер, който се появява на нашата карта, за това ще използваме функцията отново InfoWindow () и ще добавим събитие за променливата, която дефинираме с екземпляра на метода, нека видим:
функция addMarker () {var координата = createLgRandom (); var marker = new google.maps.Marker ({позиция: координата, карта: карта, заглавие: 'Случайна отметка -' + markerId}); var infowindow = new google.maps.InfoWindow ({content: 'Marker Info Window - ID:' + markerId}); google.maps.event.addListener (маркер, „щракване“, функция () {infowindow.open (карта, маркер);}); markerId ++; } 3- След като това стане, нека видим как изглежда нашата карта с функционалността на изскачащия прозорец, който току -що включихме:
Увеличете
Увеличете
Вече тествахме силата на векторите, като показваме интересните точки на карта с маркериВъпреки това, можем да използваме вектори за начертаване на линии и показване на маршрута между две точки на нашата карта, нека видим как го правим:
1- Ще създадем файл, наречен add_line.html и ще включим нашия API, както и стиловете от първия пример, сега ще дефинираме координатите, които идват от Мадрид да се Барселона, да видим:
var координати Line = [[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- Преди да преминем към функцията за инициализация на нашата карта, първо ще създадем функцията addLine () където първото нещо, което ще направим, е да повторим масив от координати и да създадем нов масив, който ще съдържа обект от тип LatLng, да видим:
функция addLine () {var pointCount = координатаLine.length; var linePath = []; for (var i = 0; i <pointCount; i ++) {var tempLatLng = нов google.maps.LatLng (координатаЛиния [i] [0], координатна линия [i] [1]); linePath.push (tempLatLng); } 3- След това задаваме свойствата на нашата линия, като цвят, непрозрачност и дебелина. След като направим това, просто трябва да изпратим до метода Полилиния опциите като параметър и задайте променливата на полилинията към текущата карта:
var lineOptions = {path: linePath, strokeWeight: 7, strokeColor: '# 313cac', strokeOpacity: 0.8} var polyline = new google.maps.Polyline (lineOptions); polyline.setMap (карта); } 4- Накрая създаваме добре познатата ни функция initializeMap () и вместо да имаме функция, наречена MarkerEvents в края на нея, ще заменим този ред с името на нашата функция addLine (), създаваме нашия HTML и го изпълняваме в браузъра си, той трябва да изглежда така:
Увеличете
Това може да звучи доста сложно, но не е, с помощта на класовете и методите на API Можем да го разрешим с няколко реда код, нека видим как го правим:
1- Първото нещо е да включим нашите API, нашите стилове и ние дефинираме нашите глобални променливи, използваме същите координати от предишния пример, за да използваме същия път, допълнително дефинираме променливата полилиния като глобален, за да можем да го използваме в пълния обхват на нашия Javascript:
var карта; var полилиния; var координати Line = [[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- Сега създаваме нашата функция addAnimatedLine () който ще има подобна структура на функцията addLine () От предишния пример обаче тази функция ще има определението на символа, който ще използваме, за да покажем движещия се обект между тези две точки, за този случай ще използваме стрелка:
var arrowSymbol = {strokeColor: '# 000', мащаб: 3, път: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}; 3- Накрая трябва само да зададем тази променлива на опцията икони от дефиницията на линията:
var lineOptions = {пътека: linePath, икони: [{icon 4- След като това е направено, трябва само да анимираме нашата икона и правим това в извиканата функция animateArrow () което трябва да включим в края на дефиницията на функцията addAnimatedLine () Нека да видим какво съдържа функцията:
функция animateArrow () {var counter = 0; var accessVar = window.setInterval (function () {counter = (counter + 1)% 100; var arrows = polyline.get ('icons'); стрелки [0]. offset = (counter / 2) + '%'; polyline.set ('икони', стрелки);}, 50); } 5- За да завършим, инициализираме нашата карта, както вече знаем, и извикваме нашата функция addAnimatedLine ()Нека да видим, когато изпълняваме как изглежда в нашия браузър, важно е да споменем, че стрелката има ефект на преместване от точка до точка:
Увеличете
