Teie lõplik juhend Google Mapsi SDK-le iOS-is, kasutades Swift 4

Paljud iOS-i rakendused kasutavad Google Mapsi. See on väga levinud funktsioon, nii et olen otsustanud koostada iOS-i jaoks mõeldud Google Mapsi SDK lõpliku juhendi. See õpetus hõlmab kõike, mida peate teadma.

Loodan, et minu lugejad soovivad funktsioone, et saaksin seda artiklit laiendada. Kõik dokumenteeritakse selles postituses! ?

Paigaldamine

Enne kodeerimise alustamist peame kõigepealt installima Google Mapsi iOS SDK. Võite eelistada mõnda muud sõltuvushaldurit, kuid ma soovitaksin CocoaPodsi.

Looge oma projekti juurkataloogi sisse Podfile ja kopeerige järgmine kood:

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

Kõik, mida peate tegema, on rea YOUR_TARGET_NAME stringi muutmine tegeliku väärtusega. Salvestage fail ja sulgege see. Avage terminal ja cd projekti juurkataloogi, seejärel tippige pod install. Sa oled valmis! ?

Hankige API võti

Google Mapsi iOS SDK kasutamiseks vajate API võtit. Võtme genereerimiseks peate külastama Google API konsooli.

Looge projekt ja navigeerige jaotisse „Volitused”.

Seejärel klõpsake nuppu „Loo mandaadid”ja valige API võti. Peate esitama oma projektide paketi ID. Võti genereeritakse unikaalse komplekti ID abil, nii et kui seda muudetakse, ei tööta Google Mapsi teenused !

Minge oma projekti juurde ja AppDelegate.swiftlisage oma klassis import GoogleMaps. Seejärel kopeerige järgmine kood asukohtaapplication(_:didFinishLaunchingWithOptions:)

GMSServices.provideAPIKey("YOUR_API_KEY")

Step 1 — Add a map

Alustuseks näitan teile, kuidas koos põhitähisega kaarti üles seada. Koodi, mida näete siin, testitakse paralleelselt, kui kirjutan.

Alustame! ?

Külastage oma UIViewControllerit (kuhu peate kaardi lisama). Looge vajaliku suurusega kohandatud UIView. Määrake GMSMapViewklass UIView'le kohandatud klassina (vt allpool olevat pilti). Ärge unustage ka delegaati ühendada.

Lõpuks natuke koodi!

Tuleme tagasi UIViewControlleri juurde ja kirjutame koodi. ⌨️

️ Allolevasse juppi lisasin kogu klassi, et saaksite toimuvast parema pildi.

GMSCameraPositionütleb kaardile, millised koordinaadid keskpunktiks võtta. Lihtsa markeri kaardil kuvamiseks kasutage showMarker()funktsiooni.

Lisage faili lõppu laiend, mis "salvestab" vajalikud GMSMapViewDelegatemeetodid.

2. samm - delegeerige meetodid

Tutvustan teile nüüd mõnda GMSMapViewDelegatemeetodit ja nende volitusi. ✊

GMSMarkeri InfoWindow

Google Mapsis on InfoWindow hüpikaken, mis sisaldab lisateavet antud asukoha kohta. See kuvatakse siis, kui kasutaja puudutab meie ülaltoodud markerit.

Meie InfoWindow on kohandatav. Saate lisada oma UIView koos vajalike komponentidega.

Olen kirjutanud näite rakendamisest. See eeldab, et enamikul juhtudel kasutavad inimesed kohandatud InfoWindowit,

  • didTapInfoWindowOf() tuvastab, kui kasutaja puudutab InfoWindowit.
  • markerInfoWindow() lisab kohandatud UIView, mida tahame markerile näidata.
  • didLongPressInfoWindowOf() tuvastab, kui InfoWindow on pikka aega vajutatud.

Lohistage GMSMarker

GMSMapViewDelegate'i teine ​​huvitav omadus on võime markerit lohistada. Seda on võimalik saavutada minimaalse hulga koodiga.

Kõik, mida peate tegema, on "lüliti" sisse lülitamine, helistades marker.isDragabble=trueülaltoodud markerile.

Markeri lohistamiseks peate kasutama pikka vajutust. Kui peate teavitama kasutaja lohistamise algusest ja lõpetamisest, saate rakendada neid kolme delegeerimismeetodit:

  • didBeginDragging teatab üks kord - kui lohistamine on alanud.
  • didDrag teavitab markerit lohistades.
  • didEndDragging teatab üks kord - kui lohistamine on lõppenud.

GMSMmarkeri positsioon

Mis siis, kui peate asukohta muutma, GMSMarkerkui kasutaja kaardil koputab? Noh, GMSMapViewDelegatepakub ka sellele lahenduse. Ühe delegaadimeetodiga saab pealtkuulatud ala koordinaadid (laius- ja pikkuskraadid) kätte saada. Seejärel määrab ta nende väärtused markerile.

  • didTapAt() tagastab kaardil puudutatud alalt koordinaadi

3. samm - kujundite lisamine

Google Mapsi iOS SDK muudab kuju joonistamise lihtsaks. Ma käsitlen joonistamise joonte, hulknurkade ja ringidega.

Polüliinid

Kujundeid saab ehitada joonte abil. Saame Google Mapsi jooni tõmmata, kasutades joonjooni. Nimetatakse objekti, mis aitab meil joonistamisel GMSPolyline.

Polüjoone loomiseks peate looma tee, kasutades GMSMutablePath. Tee loomise alustamiseks on vaja kahte või enamat punkti.

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

Kõik, mida peate teadma automaatse paigutuse kohta hackernoon.com

Telli minu uudiskiri: