Kuinka ottaa käyttöön mukautetut ja dynaamiset karttamerkintätiedot Windowsille Google Maps iOS: lle

kuvalähde: https://codyhouse.co/gem/custom-google-map/

Tämä artikkeli on nyt yli vuosi vanha ja sellainen koodi saattaa olla vanhentunut.

Jos aiot toteuttaa karttanäkymän iOS-sovelluksessasi, olet todennäköisesti käyttämässäsi Google Mapsia toisin kuin Apple Mapsissa - enkä syytä sinua. Sovellusten kartoittamisessa on kaksi yleistä käyttöä: ohjeiden tarjoaminen ja tiettyjen sijaintien ilmoittaminen kartalla. Jos sovellukseesi sisältyy jälkimmäinen, karttamerkinnät ovat menemistyökalu sen helpottamiseksi. Tietoikkunat ovat näkymiä, jotka esitetään, kun käyttäjä napauttaa merkkiä - ja koska tämä on Swift, näissä näkymissä on paljon potentiaalisia toimintoja ja tietoja. Vaikka Googlen tarjoama SDK-opas menee yksityiskohtaisesti jokaisessa tuetussa karttakomponentissa, ne eivät tee itsestään selväksi, kuinka se koota kaikki yhteen. Nyt, kun olen oppinut työskennellessäni ensimmäisen karttakeskeisen sovellukseni kanssa, paitsi, että Googlen itsensä tarjoamia ilmeisiä opetusohjelmia tai oppaita ei ole, myöskään kaikkialla verkossa ei ole saatavana täydellisiä ja kiillotettuja oppaita.

oletukset

Google Maps on otettava käyttöön ja toimittava sovelluksessasi jo. Jos tarvitset apua itse Google Mapsin toteuttamiseen, niin verkossa ja itse Googlen saatavilla on paljon helppoja seurata oppaita täällä: https://developers.google.com/maps/documentation/ios-sdk/start

Jos aiot ottaa käyttöön dynaamisia tietoikkunoita, sovellustasi pitäisi myös tukea tietokanta - käytän tapauksessani Firebase-tietokantaa. Tietokannan merkinnät tallentavat kaikkien merkitsimiesi koordinaatit ja joitain siihen liittyviä tietoja.

Tässä oppaassa aion luoda mukautetun XIB-tiedoston merkitsijöillesi, näyttää merkintätiedot sen UIL-merkinnöissä ja käsitellä merkinnällä tehtyjä painikkeen painallustapahtumia. Tämä tehdään käyttämällä Swift 3: ta.

1. Muokatun merkkinäkymän luominen

Ensimmäinen askel on uuden katselutiedoston luominen, jonka nimi on MapMarkerWindowView.xib. XIB-tiedostonäkymän kokoa tulisi muuttaa haluamasi tietoikkunan kokoon, ja siinä tulisi olla kaikki haluamasi käyttöliittymäelementit, kuten UILabels, UIButtons, UISwitches ja kaikki muut, jotka haluat ehkä sisällyttää. Älä unohda lukita kaikkia näitä elementtejä paikoilleen rajoituksilla. Tässä esimerkissä minulla on kolme tarraa ja yksi painike.

2. Liitetyn luokkatiedoston luominen

Luo seuraavaksi uusi Swift-tiedosto, joka sisältää luokan katselutiedoston hallintaan. Minuni on nimeltään MapMarkerWindow.swift. Tämän luokan tulisi ulottaa UIView ja siinä tulisi olla IBOutlet-viitteet käyttöliittymäelementteihisi. Jos sisällytät näkymääsi elementtejä, jotka vaativat tapahtumakäsittelijöitä, kuten UIB-painikkeet, viitata niihin luokassasi IBActions-toiminnolla. Jotta MapViewController-luokka voi tietää näiden tapahtumien käynnistyneen, sinun on luotava valtuutettu protokolla yhdessä tapahtuman käsittelymenetelmien kanssa MapMarkerWindow.swift -sovelluksessa ja otettava se käyttöön MapViewController-luokassa. Luo lisäksi julkisen luokan menetelmä välittääksesi aiemmin luomasi XIB-tiedoston. Tätä tarvitaan myöhemmin, kun määritetään mukautettu tietoikkuna merkitsimille.

3. Marker-tietojen lataaminen tietokannasta

Siirtyessäsi luokkaan, joka hallinnoi Google Maps -näkymääsi, sinun on koottava sanakirja tietoja jokaisesta merkinnästä, jonka haluat sijoittaa kartallesi - siihen on sisällytettävä merkinnän sijainnin koordinaatit. Kuten aiemmin mainittiin, tallennan merkintätietojani Firebaseen. Nouda merkkitietosi haluamallasi tavalla ja varmista, että leveys- ja pituusarvot ovat helposti saatavilla. Lataan tapauksessani kaikki kunkin merkin tiedot ja tallennan sanakirjaan, jota kutsun. Kun sinulla on tiedot, olet valmis luomaan karttamerkinnän - teemme tämän pääkierteellä laskuttaaksesi laskut käyttöliittymästä. Tässä vaiheessa voit käyttää kuvaa mukautettuna merkkikuvana ja värittää sitä haluamallasi tavalla. Määritä merkinnän sijaintiominaisuus aiemmin lataamillesi koordinaattiarvoille ja älä unohda osoittaa merkinnän userData-ominaisuutta spot-sanakirjaan, joka sisältää kaikki merkkitiedot. Tämä vaihe on tärkeä, koska kaikki tiedot, jotka haluat näyttää tietoikkunassa, täytyy olla osa tätä markkeriin liittyvää userData-sanakirjaa. Sinun pitäisi kutsua tätä menetelmää viewDidLoadista.

4. Ota käyttöön GMSMapViewDelegate-menetelmät

Pyydä MapViewControlleria laajentamaan GMSMapViewDelegate-protokollaan. Tämä vaatii muutaman menetelmän käyttöönottoa, mutta luo ensin kaksi luokan ominaisuutta:

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

Luo seuraavaksi funktio palauttaaksesi luomasi mukautetun näkymän luokan esiintymän

Määritä viewDidLoad-ohjelmassa itse.infoWindow = loadNiB ().

Nyt otamme käyttöön joitain GMSMapViewDelegate-menetelmiä. Ensisijainen menetelmä, jonka avulla voit saada kaikki karttatiedot näkyviin tietoikkunassa, on didTap-merkintämenetelmä. Sisältyneellä merkkiparametrilla voidaan päästä kaikkiin merkitsijöiden tietoihin marker.userData kautta. Aseta self.locationMarker-luokan omaisuudeksi tämä merkki - tämä on niin, että voimme myöhemmin käsitellä tietoikkunan siirtämistä asianmukaisesti, jos karttaa siirretään. Haluamme myös nollata self.infoWindow-luokan ominaisuuden olla loadNiB () uudelleen. Tässä vaiheessa voimme tehdä mitä tahansa käyttöliittymäelementtien määrityksiä tietoikkunaan, esimerkiksi lisätä kulmasäteen tai pienentää opasiteettia. Asetamme täällä myös tietoikkunan etiketin (tekstin) tekstin, joka on annettu osoitteessa marker.userData. Haluamme myös sijoittaa tietoikkunan näkymän keskipisteen yhtä suureksi kuin merkinnän keskipiste täällä. Negatiivisen Y-arvon poikkeama vaaditaan, kun tietoikkuna asetetaan merkinnän yläpuolelle.

Kaksi muuta siirrettävää menetelmää GMSMapViewDelegate-protokollasta, jonka toteutamme, ovat didChange position ja didTapAt -koordinaatti. Jos karttanäkymää siirrettiin, kun tietoikkuna on auki, haluamme, että tietoikkuna siirtyy oikein uudelleen pysyäkseen merkinnän yläpuolella, josta se oli peräisin. Lisäksi, jos käyttäjä napauttaa muualla kartalla, hylkäämme tietoikkunan esittämisen.

Tässä vaiheessa, jos ajamme sovelluksemme, tietoikkuna tulee tuoda mukanaan asianmukaisilla tiedoilla.

5. Käsittele tapahtuma laukaisee tietoikkunasta

Jos haluamme suorittaa vähän koodia MapViewControllerista, kun tietoikkunan painiketta napautetaan, toteutamme MapMarkerDelegate-protokollan yksinkertaisesti luokassa. Tämä pakottaa meidät soittamaan didTapInfoWindow-menetelmään, jonka määrittelimme siinä protokollassa. Tästä eteenpäin meillä on täysi pääsy merkitsijöiden tietoihin. Tästä voi olla hyötyä, jos haluamme työntää uuden näkymäohjaimen, joka vaatii täplätiedot.

Se siitä! Tämän tulisi palata kaikki tarvittavat työosat, jotta saadaan mukautettu tietoikkuna karttamerkeihisi.