Kuidas rakendada kohandatud ja dünaamilist kaardimarkeriteabe Windowsi Google Maps iOS-i jaoks

pildiallikas: https://codyhouse.co/gem/custom-google-map/

See artikkel on nüüd juba üle aasta vana ja selline kood võib olla vananenud.

Kui kavatsete oma iOS-i rakenduses kaardivaate rakendada, siis kaldute tõenäoliselt Google Maps'i kasutamisse erinevalt Apple Mapsist - ja ma ei süüdista teid. Rakenduste kaardistamisel on kaks levinud kasutust: juhiste pakkumine ja konkreetsete asukohtade märkimine kogu kaardil. Kui teie rakendus sisaldab viimast, on kaardimarkerid selle hõlbustamiseks tööriist. Info Windows on vaated, mis kuvatakse siis, kui kasutaja koputab markerit - ja kuna see on Swift, on nendes vaadetes palju potentsiaalset funktsionaalsust ja teavet. Ehkki Google'i pakutav SDK-juhend läheb iga toetatava kaardikomponendi kohta väga detailselt lahti, ei tee need siiski selgeks, kuidas see kõik kokku panna. Nagu ma oma esimese kaardikeskse rakendusega töötades teada sain, pole mitte ainult Google'i endi pakutavad ilmsed õpetused ega juhendid, vaid ka kõikjal veebis saadaval olevad täielikud ja lihvitud juhendid.

Eeldused

Google Maps tuleks juurutada ja see peaks teie rakenduses juba töötama. Kui vajate abi Google Mapsi enda rakendamisel, on kogu veebis ja Google'i endi poolt saadaval palju hõlpsasti jälgitavaid juhendeid siin: https://developers.google.com/maps/documentation/ios-sdk/start

Kui plaanite rakendada dünaamilisi teabeaknaid, peaks teie rakendust toetama ka andmebaas - minu puhul kasutan Firebase'i. Andmebaasi kanded salvestavad kõigi teie markerite koordinaadid ja mõned sellega seotud andmed.

Selles juhendis töötan läbi teie markerite jaoks kohandatud XIB-faili, kuvatakse markerite andmed selle UIL-sildites ja käsitletakse markeril tehtud nupuvajutuse sündmusi. Selleks kasutatakse funktsiooni Swift 3.

1. Kohandatud markerite vaate loomine

Esimene samm on uue vaatefaili loomine, mille nimi oli MapMarkerWindowView.xib. XIB-faili vaate suurust tuleks muuta vastavalt teie eelistatud teabeakna suurusele ja see peaks sisaldama kõiki soovitud kasutajaliidese elemente, nagu UILabels, UIB-nupud, UIS-lülitid ja kõik muu, mida võiksite lisada. Ärge unustage kõiki neid elemente piirangute abil oma kohale lukustada. Selles näites on mul kolm silti ja üks nupp.

2. Seotud klassi faili tegemine

Seejärel looge uus Swifti fail, mis sisaldab klassi teie vaatefaili juhtimiseks, minu nimi on MapMarkerWindow.swift. See klass peaks laiendama UIView-d ja sellel peaks olema IBOutlet-viited teie kasutajaliidese elementidele. Kui lisate oma vaatesse elemente, mis nõuavad sündmuste käitlejaid, näiteks UIB-nupud, siis viidake nendele klassis IBActions-iga. Kui soovite oma MapViewControlleri klassile teada anda, et need sündmused on käivitatud, peate oma MapMarkerWindow.swift koos sündmuste käitlemise meetoditega looma delegeeritud protokolli ja rakendama selle oma MapViewControlleri klassis. Lisaks looge varem loodud XIB-faili kiirendamiseks avaliku klassi meetod. Seda nõutakse hiljem markeritele kohandatud teabeakna määramisel.

3. Markerite andmete laadimine andmebaasist

Liikudes klassi, mis haldab teie Google Mapsi vaadet, peate koguma iga sõnumi andmete sõnastiku, mille soovite oma kaardile paigutada - see peab sisaldama markeri asukoha koordinaate. Nagu eelnevalt mainitud, salvestan oma markerite andmeid Firebase'is. Hankige oma markerite andmed mis tahes viisil ja veenduge, et laius- ja pikkuskraadid on hõlpsasti kättesaadavad. Minu puhul laadin kõik andmed iga üksiku markeri kohta ja salvestan sõnaraamatusse, mida ma kutsun. Kui teil on andmed, olete valmis kaarditähise looma - teeme seda põhilõngal, et arvutused UI-lõimest maha laadida. Sel ajal saate pilti kasutada kohandatud markerpildina ja värvida vastavalt soovile. Määrake markeri asukoha omadus eelnevalt laaditud koordinaatide väärtustele ja ärge unustage, et markeri omadus userData omistatakse täppsõnaraamatule, mis sisaldab kõiki markeri andmeid. See samm on oluline, kuna kõik andmed, mida soovite teabeaknas kuvada, peavad selle kasutajaData sõnastiku osa, mis on seotud markeriga. Sellele meetodile peaksite helistama vaatestDidLoad.

4. Rakendage meetodid GMSMapViewDelegate

Laske oma MapViewControlleril laieneda protokollile GMSMapViewDelegate. Selleks peate rakendama mõned meetodid, kuid kõigepealt looge kaks klassi atribuuti:

private var infoWindow = MapMarkerWindow ()
fileprivate var locationMarker: GMSMarker? = GMSMarker ()

Järgmisena looge funktsioon teie kohandatud vaate klassi eksemplari tagastamiseks

Seadke rakenduses viewDidLoad kindlasti self.infoWindow = loadNiB ().

Nüüd rakendame mõned GMSMapViewDelegate meetodid. Peamine meetod, mis võimaldab teil saada kõik teabeaknas kuvatavad oma kaardiandmed, on marker-meetod didTap. Sisestatud markeriparameetri abil pääsete kõigi nende markerite andmete juurde läbi marker.userData. Seadke sellele markeriks oma self.locationMarkeri klassi atribuut - see on nii, et saaksime hiljem teabeakna teisaldamisega hakkama ka siis, kui kaarti liigutatakse. Tahame lähtestada ka self.infoWindow klassi atribuudi uuesti loadNiB (). Sel hetkel saame infoakent aktiveerida mis tahes kasutajaliidese elemendi abil, näiteks lisada nurgaraadiust või vähendada läbipaistmatust. Seadistame siin ka meie infoakende sildi (te) teksti, kasutades saidil marker.userData esitatud andmeid. Samuti tahame paigutada teabeakna vaate keskpunkti siin võrdseks markeri keskpunktiga. Teabeakna markeri kohal asetamiseks on vaja Y-väärtuse negatiivset nihutust.

Ülejäänud kaks protokolli GMSMapViewDelegate delegeeritud meetodit, mida me rakendame, on DidChange position ja koordinaat didTapAt. Kui kaardivaadet teisaldati, kui infoaken on avatud, tahame, et teabeaken paigutaks ennast uuesti, et jääda selle markeri ülaossa, kust see pärineb. Lisaks, kui kasutaja koputab mujal kaardil, välistame teabeakna esitamise.

Kui me rakendust käivitame, tuleks infoaken esitada koos selle andmetega.

5. Hallake teabeaknast sündmuste päästikuid

Kui tahame teabeaknas asuva nupu koputamisel MapViewControllerist natuke koodi käivitada, rakendame selles klassis lihtsalt MapMarkerDelegate protokolli. See sunnib meid helistama didTapInfoWindow meetodile, mille me selles protokollis määratlesime. Siit alates on meil täielik juurdepääs nende markerite andmetele. See võib olla kasulik, kui tahame suruda uut vaatekontrolli, mis nõuab täppide teavet.

See selleks! See peaks kokku panema kõik tööosad, mis on vajalikud teie kaardimarkerite jaoks kohandatud teabeakna saamiseks.