Как да внедрите информация за персонализирани и динамични маркери за Windows за Google Maps iOS

източник на изображения: https://codyhouse.co/gem/custom-google-map/

Тази статия вече е над една година и такъв код може да е остарял.

Ако планирате да внедрите изглед на карта в приложението си за iOS, има вероятност да се наклоните да използвате Google Maps, за разлика от Apple Maps - и не ви обвинявам. Приложенията за картографиране имат две общи приложения: предоставяне на упътвания и посочване на конкретни местоположения по цялата карта. Ако приложението ви ще включва последното, маркерите за карти са инструментът, който го улеснява. Информация Windows са изгледите, представени, когато потребителят натисне маркер - и тъй като това е Swift, има много потенциална функционалност и информация, които могат да бъдат представени в тези изгледи. Въпреки че ръководството за SDK, предоставено от Google, обхваща много подробно всеки поддържан отделен компонент на картата, те не правят очевидно как да ги разделим заедно. Както научих, докато работя върху първото си приложение, ориентирано към картата, не само че няма очевидни ръководства или ръководства, предоставени от самия Google, няма и пълни и излъскани ръководства, достъпни навсякъде онлайн.

Предположения

Google Maps вече трябва да бъдат внедрени и да работят във вашето приложение. Ако имате нужда от помощ при прилагането на самите Google Maps, има много лесни за следване ръководства, достъпни в цялата мрежа, и от самия Google тук: https://developers.google.com/maps/documentation/ios-sdk/start

Ако планирате да внедрите динамични информационни прозорци, приложението ви също трябва да бъде подкрепено от база данни - в моя случай ще използвам Firebase. Записите в базата данни ще съхраняват координатите на всички ваши маркери, както и някои данни, свързани с него.

В това ръководство ще премина през създаването на персонализиран XIB файл за вашите маркери, показване на данни от маркера в неговите UILabels и обработка на събития за натискане на бутони, извършени върху маркера. Това ще стане с помощта на Swift 3.

1. Създаване на изглед на персонализиран маркер

Първата стъпка е създаване на нов файл с изглед, който нарекох MapMarkerWindowView.xib. Изгледът на XIB файл трябва да бъде преоразмерен до предпочитания от вас размер на информационния прозорец и трябва да съдържа всички желани от вас потребителски интерфейсни елементи, като UILabels, UIButtons, UISwitches и всичко останало, което може да искате да включите. Не забравяйте да заключите всички тези елементи, като използвате ограничения. В този пример имам три етикета и един бутон.

2. Съставяне на файла на асоциирания клас

След това създайте нов файл Swift, който ще съдържа класа за управление на вашия изглед файл, моят е кръстен MapMarkerWindow.swift. Този клас трябва да разширява UIView и да има препратки на IBOutlet към вашите UI елементи. Ако включите във вашия изглед елементи, които изискват обработващи събития, като UIButtons, препратете ги във вашия клас с IBActions. За да уведомите вашия клас MapViewController, че тези събития са задействани, ще трябва да създадете протокол за делегиране заедно с методите за обработка на събития във вашия MapMarkerWindow.swift и да го внедрите във вашия клас MapViewController. Освен това, създайте метод на публичен клас, за да създадете XIB файла, който сте създали преди това. Това ще се изисква по-късно, когато зададете персонализирания информационен прозорец на маркерите.

3. Зареждане на маркерните данни от вашата база данни

Преминавайки към класа, който управлява изгледа ви в Google Maps, ще трябва да съберете речник от данни, свързани с всеки маркер, който искате да поставите на картата си - това трябва да включва координати за местоположението на маркера. Както споменахме по-рано, съхранявам данните си за маркери в Firebase. Изтеглете данните на вашия маркер, по какъвто начин трябва, и се уверете, че стойностите за ширина и дължина са лесно достъпни. В моя случай ще заредя всички данни за всеки отделен маркер и ще съхраня в речник, който наричам място. След като разполагате с данните, вие сте готови да създадете маркера на картата - ние ще направим това на основната нишка, за да разтоварим изчисленията от потребителския интерфейс. На този етап можете да използвате изображение като изображение на персонализиран маркер и да го оцветите по ваше желание. Присвойте свойството на позицията на маркера на заредените преди това стойности на координатите и не забравяйте да зададете свойството userData на маркера на речника на място, съдържащ всички данни за маркера. Тази стъпка е важна, тъй като всички данни, които искате да се показват в информационния прозорец, ще трябва да бъдат част от този речник на потребителски данни, свързани с маркера. Трябва да се обадите на този метод от viewDidLoad.

4. Прилагайте методите на GMSMapViewDelegate

Нека вашият MapViewController се простира от протокола GMSMapViewDelegate. Това ще ви наложи да внедрите няколко метода, но първо създайте два класа свойства:

частен var infoWindow = MapMarkerWindow ()
fileprivate var locationMarker: GMSMarker? = GMSMarker ()

След това създайте функция за връщане на екземпляр от създадения от вас персонализиран изглед клас

В viewDidLoad не забравяйте да зададете self.infoWindow = loadNiB ().

Сега ще внедрим някои методи на GMSMapViewDelegate. Основният метод, който ще ви позволи да получите всички данни за вашата карта, показани в информационния прозорец, е методът на маркера didTap. Използвайки предавания параметър на маркер, имаме достъп до всички данни на тези маркери чрез marker.userData. Задайте свойството на класа self.locationMarker да бъде този маркер - това е така, за да можем по-късно да обработваме правилно преместването на информационния прозорец, ако картата се премести. Също така искаме да възстановим свойството на клас self.infoWindow, за да бъде отново loadNiB (). В този момент можем да извършим всяка конфигурация на UI елемент към информационния прозорец, като например да добавим радиус на ъгъла или да намалим непрозрачността. Тук също задаваме текста на етикета (ите) на нашия информационен прозорец, използвайки данните, предоставени в marker.userData. Тук също искаме да поставим централната точка на изгледа на информационния прозорец, равна на средната точка на маркера. За да поставите информационния прозорец над маркера, ще е необходимо отрицателно изместване на стойността Y.

Другите два метода на делегат от протокола GMSMapViewDelegate, които ще внесем, са позицията didChange и didTapAt. Ако изгледът на картата е бил преместен, докато е отворен информационен прозорец, искаме информационният прозорец правилно да се препозиционира, за да остане върху маркера, от който е получена. Освен това, ако потребител докосне другаде на картата, ще отхвърлим информационния прозорец от представянето му.

В този момент, ако стартираме нашето приложение, информационният прозорец трябва да бъде представен с неговите подходящи данни.

5. Работете със задействащите задействания от прозореца за информация

Ако искаме да изпълним малко код от MapViewController, когато се натисне бутон в информационния прозорец, ние просто внедряваме протокола MapMarkerDelegate в този клас. Това ще ни принуди да извикаме метода didTapInfoWindow, който дефинирахме в този протокол. От тук имаме пълен достъп до данните на тези маркери. Това може да бъде полезно, ако искаме да натиснем нов контролер за изглед, който изисква информация за петна.

Това е! Това трябва да обедини всички работещи части, необходими за получаване на персонализиран информационен прозорец за маркерите на вашите карти.