Paras oppaasi Google Maps SDK: lle iOS: ssä Swift 4: n avulla

Monet iOS-sovellukset käyttävät Google Mapsia. Tämä on hyvin yleinen ominaisuus, joten olen päättänyt laatia lopullisen oppaan iOS-laitteiden Google Maps SDK: sta. Tämä opetusohjelma kattaa kaiken, mitä sinun tarvitsee tietää.

Toivon, että lukijani pyytävät ominaisuuksia, joten voin laajentaa tätä artikkelia. Kaikki dokumentoidaan tässä viestissä! ?

Asennus

Ennen koodauksen aloittamista meidän on ensin asennettava Google Maps iOS SDK. Saatat mieluummin käyttää jotain muuta riippuvuuksien hallintaa, mutta suosittelen CocoaPodsia.

Luo Podfile projektin juurihakemistoon ja kopioi seuraava koodi:

source '//github.com/CocoaPods/Specs.git'target 'YOUR_TARGET_NAME' do pod 'GoogleMaps'end

Sinun tarvitsee vain muuttaa merkkijono YOUR_TARGET_NAME todellisella arvolla. Tallenna tiedosto ja sulje se. Avaa pääte ja cd projektin juurihakemistoon ja kirjoita sitten pod install. Olet valmis! ?

Hanki API-avain

Google Maps iOS SDK: n käyttäminen edellyttää API-avainta. Voit luoda avaimen käymällä Google API -konsolissa.

Luo projekti ja siirry kohtaan Tunnistetiedot.

Napsauta sitten Luo kirjautumistiedotja valitse API-avain. Sinun on annettava projektisi niputunnus. Avaimen tuottaa yksilöllinen pakettitunnus, joten jos sitä muutetaan, Google Maps -palvelut eivät toimi !

Mene projektiisi ja AppDelegate.swiftlisää luokassa import GoogleMaps. Kopioi sitten seuraava koodi osoitteeseenapplication(_:didFinishLaunchingWithOptions:)

GMSServices.provideAPIKey("YOUR_API_KEY")

Step 1 — Add a map

Aloitan osoittamalla, kuinka kartta asetetaan yhdessä perusmerkinnän kanssa. Koodi, jonka näet täällä, testataan rinnakkain kirjoittaessani.

Aloitetaan! ?

Käy UIViewController-ohjaimessasi (mihin sinun on lisättävä kartta). Luo haluamasi kokoinen mukautettu UIView. Määritä GMSMapViewluokka mukautetuksi luokaksi UIView'lle (katso alla oleva kuvakaappaus). Älä myöskään unohda yhdistää edustajaa.

Lopuksi, koodi!

Palataan takaisin UIViewControlleriin ja kirjoitetaan koodi. ⌨️

️ Olen lisännyt alla olevaan katkelmaan koko luokan, jotta saat paremman kuvan tapahtumasta.

GMSCameraPositionkertoo kartalle mitkä koordinaatit otetaan keskipisteeksi. Jos haluat näyttää yksinkertaisen merkin kartalla, käytä showMarker()toimintoa.

Lisää tiedoston loppuun laajennus, joka "tallentaa" GMSMapViewDelegatetarvitsemamme menetelmät.

Vaihe 2 - delegoi menetelmät

Esittelen nyt sinulle joitain GMSMapViewDelegatemenetelmiä ja niiden voimia. ✊

GMSMarker InfoWindow

Google Mapsissa InfoWindow on ponnahdusikkuna, joka sisältää lisätietoja tietystä sijainnista. Se näkyy, kun käyttäjä napauttaa yllä lisäämäämme merkkiä.

InfoWindow on muokattavissa. Voit liittää oman UIView: n tarvitsemillasi komponenteilla.

Olen kirjoittanut esimerkin toteutuksesta. Tämä olettaa useimmissa tapauksissa, että ihmiset käyttävät mukautettua InfoWindow-tiedostoa,

  • didTapInfoWindowOf() havaitsee, kun käyttäjä napauttaa InfoWindow-painiketta.
  • markerInfoWindow() lisää mukautetun UIView-kuvan, jonka haluamme näyttää merkinnälle.
  • didLongPressInfoWindowOf() tunnistaa, kun InfoWindow on painettu pitkään.

Vedä GMSMarker

Toinen mielenkiintoinen piirre GMSMapViewDelegatessa on kyky vetää merkkiä. Tämä voidaan saavuttaa pienellä määrällä koodia.

Sinun tarvitsee vain kytkeä "kytkin" päälle kutsumalla marker.isDragabble=trueyllä luotua merkkiä.

Jos haluat vetää merkintää, sinun on käytettävä pitkää painallusta. Jos sinulle on ilmoitettava, kun käyttäjä alkaa ja lopettaa vetämisen, voit toteuttaa nämä kolme delegointimenetelmää:

  • didBeginDragging ilmoittaa kerran - kun vetäminen on alkanut.
  • didDrag ilmoittaa, kun merkkiä vedetään.
  • didEndDragging ilmoittaa kerran - kun vetäminen on päättynyt.

GMSM-merkki

Entä jos sinun on vaihdettava GMSMarkersijaintia, kun käyttäjä napauttaa karttaa? No, GMSMapViewDelegatetarjoaa ratkaisun myös siihen. Yksi edustajamenetelmä voi siepata napautetun alueen koordinaatit (leveys- ja pituusaste). Sitten se määrittää niiden arvot merkinnälle.

  • didTapAt() palauttaa koordinaatin kartan napautetulta alueelta

Vaihe 3 - Muodon lisääminen

Google Maps iOS SDK helpottaa muodon piirtämistä. Käsittelen kuinka piirtää viivojen, monikulmioiden ja ympyröiden avulla.

Polylines

Muotoja voidaan rakentaa viivoilla. Voimme piirtää viivoja Google Mapsiin käyttämällä viivoja. Objektia, joka auttaa meitä piirustuksessa, kutsutaan GMSPolyline.

Polylinjan luominen edellyttää polun luomista GMSMutablePath. Se tarvitsee vähintään kaksi pistettä polun luomisen aloittamiseksi.

If you have used the above example, you will get a rectangular shape like the one shown.

Some other useful tips:

  • To remove a polyline from the map, call mapView.clear().
  • You can change the color of the line by using polyline.strokeColor=.black.
  • Change the width of the line by calling polyline.strokeWidth=3.

Polygon

Polygon is almost the same as polylines. It works using the same approach, with a few minor differences.

For example, GMSPolygonwill draw a shape. You can then use fillColor to fill in the drawn area. Here is an example of what this looks like.

Radius (circle)

The final shape we will look at is a circle. This is probably the easiest shape of all, since it’s always the same!

To achieve this, we need to use theGMSCircle class. Here, we are not passing a path. Instead, we use one coordinate to specify the circle’s center. We also define a radius (measured in meters).

TheGMSCircle class contains the same properties as the polygon, includingfillColor , strokeColor and strokeWidth.

Step 4 — Properties and Settings

This part will cover a few properties and settings that are often used when using Google Maps in your app. Let’s take a look at them.

Change marker icon

The GMSMarkercontains two different properties for changing the marker icon.

  • marker.icon=UIImage(named: "image.png") in this approach, you pass an image filename. This replaces the default one.
  • marker.iconView=customView You can also add a custom view instead of an image. This can be used for more complex markers. For example, you may want to add some animation, or multiple components (instead of a single image). Note the icon property gets overwritten when iconView is called.

Add ‘My Location’ button

The ‘My Location’ button appears in the bottom right corner. Clicking the button will animate the map to show the user’s current location.

To add this, set mapView.settings.myLocationButton = true. The button will appear.

Zoom controls

Google Maps SDK for iOS doesn’t provide inbuilt zoom controls (but the Android SDK does). You will need to write your own logic instead.

All you need to do is add two buttons with ‘+’ and ‘-’ icons. When tapped, these will call mapView.animate(toZoom: zoom).

Control gestures

You can turn on or off any gesture that you can see on the map. For example, you might want to disable zooming, or turn off scrolling.

There are a total of four gestures available to you:

mapView.settings.scrollGestures = falsemapView.settings.zoomGestures = falsemapView.settings.tiltGestures = falsemapView.settings.rotateGestures = false

I hope that you have enjoyed this tutorial. If you want to read more on Google Maps SDK for iOS, write me a comment. I would be very happy to expand this tutorial with your requests.

That’s it from this tutorial and if it helped you please ? or share this story so others like you can find it. Thank you for your attention! ?

Check out my latest project:

‎1x2 BET - Soccer Tips & Odds

‎HOT ODDS Each day, we generate a list of the hottest odds in the world. These are odds that have dropped the most…apple.co

Read more of my writing on Medium:

Introducing Clean Swift Architecture (VIP)

Forget MVC, now!hackernoon.comYour ultimate guide to the Google Maps SDK on iOS, using Swift 4

Many iOS apps use Google Maps. This is a very common feature, so I have decided to prepare an ultimate guide on the…medium.freecodecamp.orgSWIFT — Custom UIView with XIB file

Custom UIView with XIB file is a very common practice in iOS Development. Custom UIView classes don’t contain XIB files…medium.comHow to add Spotlight support to your iOS app

A Swift tutorial that will make your app available in Spotlight searchhackernoon.comCore Data Relationships

Understanding One-to-One and One-To-Many relationshipshackernoon.comUnderstanding Auto Layout in Xcode 9

Kaikki mitä sinun tarvitsee tietää Auto Layout hackernoon.comista

Tilaa uutiskirjeeni: