Ο απόλυτος οδηγός σας για το SDK Χαρτών Google σε iOS, χρησιμοποιώντας το Swift 4

Πολλές εφαρμογές iOS χρησιμοποιούν τους Χάρτες Google. Αυτό είναι ένα πολύ κοινό χαρακτηριστικό, οπότε αποφάσισα να προετοιμάσω έναν τελικό οδηγό στο SDK Χαρτών Google για iOS. Αυτό το σεμινάριο καλύπτει όλα όσα ίσως χρειαστεί να γνωρίζετε.

Ελπίζω ότι οι αναγνώστες μου θα ζητήσουν δυνατότητες, ώστε να μπορέσω να επεκτείνω αυτό το άρθρο. Όλα θα τεκμηριωθούν σε αυτήν την ανάρτηση! ;

Εγκατάσταση

Πριν ξεκινήσουμε την κωδικοποίηση, πρέπει πρώτα να εγκαταστήσουμε το SDK iOS των Χαρτών Google. Μπορεί να προτιμάτε κάποιον άλλο διαχειριστή εξάρτησης, αλλά θα συνιστούσα τα CocoaPods.

Δημιουργήστε ένα Podfile μέσα στον ριζικό κατάλογο του έργου σας και αντιγράψτε τον ακόλουθο κώδικα:

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

Το μόνο που χρειάζεται να κάνετε είναι να αλλάξετε τη συμβολοσειρά YOUR_TARGET_NAME με πραγματική τιμή. Αποθηκεύστε το αρχείο και κλείστε το. Ανοίξτε το τερματικό και το cd στον ριζικό κατάλογο του έργου και μετά πληκτρολογήστε pod install. Τελείωσες! ;

Λάβετε ένα κλειδί API

Για να χρησιμοποιήσετε το SDK iOS των Χαρτών Google, θα χρειαστείτε ένα κλειδί API. Για να δημιουργήσετε το κλειδί θα πρέπει να επισκεφθείτε την Κονσόλα API της Google.

Δημιουργήστε ένα έργο και μεταβείτε στο "διαπιστευτήρια".

Στη συνέχεια, κάντε κλικ στην επιλογή "Δημιουργία διαπιστευτηρίων"και επιλέξτε API Key. Θα πρέπει να παρέχετε το αναγνωριστικό δέσμης των έργων σας. Το κλειδί δημιουργείται από το μοναδικό αναγνωριστικό πακέτου, οπότε αν αλλάξει, οι υπηρεσίες των Χαρτών Google δεν θα λειτουργούν !

Μεταβείτε στο έργο σας και AppDelegate.swiftπροσθέστε στην τάξη σας import GoogleMaps. Στη συνέχεια, αντιγράψτε τον ακόλουθο κωδικό στοapplication(_:didFinishLaunchingWithOptions:)

GMSServices.provideAPIKey("YOUR_API_KEY")

Step 1 — Add a map

Θα ξεκινήσω δείχνοντας σας πώς να ρυθμίσετε τον χάρτη μαζί με έναν βασικό δείκτη. Ο κώδικας που θα δείτε εδώ δοκιμάζεται παράλληλα καθώς γράφω.

Ας αρχίσουμε! ;

Επισκεφτείτε το UIViewController (όπου πρέπει να προσθέσετε τον χάρτη). Δημιουργήστε μια προσαρμοσμένη προβολή UIV με το μέγεθος που χρειάζεστε. Εκχωρήστε την GMSMapViewτάξη ως προσαρμοσμένη κλάση στην προβολή UIV (δείτε το στιγμιότυπο οθόνης παρακάτω). Επίσης, μην ξεχάσετε να συνδέσετε τον εκπρόσωπο.

Τέλος, κάποιος κωδικός!

Ας επιστρέψουμε στο UIViewController και γράψτε κάποιο κωδικό. ⌨️

️ Στο παρακάτω απόσπασμα, έχω προσθέσει ολόκληρη την τάξη για να έχετε καλύτερη εικόνα για το τι συμβαίνει.

GMSCameraPositionλέει στον χάρτη ποιες συντεταγμένες πρέπει να ληφθούν ως κεντρικό σημείο. Για να εμφανίσετε έναν απλό δείκτη στο χάρτη, χρησιμοποιήστε τη showMarker()συνάρτηση.

Στο τέλος του αρχείου, προσθέστε μια επέκταση που θα "αποθηκεύσει" τις GMSMapViewDelegateμεθόδους που χρειαζόμαστε.

Βήμα 2 - Μέθοδοι εκχώρησης

Θα σας συστήσω τώρα μερικές GMSMapViewDelegateμεθόδους και τις δυνάμεις τους. ✊

GMSMarker InfoWindow

Στους Χάρτες Google, ένα InfoWindow είναι ένα αναδυόμενο παράθυρο με επιπλέον πληροφορίες σχετικά με μια δεδομένη τοποθεσία. Εμφανίζεται όταν ο χρήστης πατήσει τον δείκτη που προσθέσαμε παραπάνω.

Το InfoWindow μας είναι προσαρμόσιμο. Μπορείτε να επισυνάψετε το δικό σας UIView με όποια στοιχεία χρειάζεστε.

Έχω γράψει ένα παράδειγμα εφαρμογής. Αυτό προϋποθέτει ότι στις περισσότερες περιπτώσεις οι άνθρωποι θα χρησιμοποιούν ένα προσαρμοσμένο InfoWindow

  • didTapInfoWindowOf() ανιχνεύει πότε ο χρήστης πατά στο InfoWindow.
  • markerInfoWindow() προσθέτει την προσαρμοσμένη προβολή UIV που θέλουμε να δείξουμε στον δείκτη.
  • didLongPressInfoWindowOf() ανιχνεύει πότε το InfoWindow έχει πατηθεί πολύ.

Σύρετε GMSMarker

Ένα άλλο ενδιαφέρον χαρακτηριστικό στο GMSMapViewDelegate είναι η δυνατότητα σύρματος του δείκτη. Αυτό μπορεί να επιτευχθεί με ελάχιστο αριθμό κωδικών.

Το μόνο που έχετε να κάνετε είναι να ενεργοποιήσετε το "διακόπτη", καλώντας marker.isDragabble=trueτον δείκτη που δημιουργήθηκε παραπάνω.

Για να σύρετε το δείκτη, θα πρέπει να χρησιμοποιήσετε παρατεταμένο πάτημα. Εάν πρέπει να ειδοποιηθείτε όταν ο χρήστης ξεκινά και τελειώνει τη μεταφορά, μπορείτε να εφαρμόσετε αυτές τις τρεις μεθόδους εκπροσώπων:

  • didBeginDragging ειδοποιεί μία φορά - όταν έχει ξεκινήσει η μεταφορά.
  • didDrag ειδοποιεί κατά τη μεταφορά του δείκτη.
  • didEndDragging ειδοποιεί μία φορά - όταν η μεταφορά έχει τελειώσει.

Θέση GMSMarker

Τι γίνεται αν πρέπει να αλλάξετε τη GMSMarkerθέση ενώ ο χρήστης πατά στον χάρτη; Λοιπόν, GMSMapViewDelegateπροσφέρει μια λύση για αυτό επίσης. Μια μέθοδος μεμονωμένου πληρεξούσιου μπορεί να αναχαιτίσει τις συντεταγμένες (γεωγραφικό πλάτος και μήκος) της κτυπημένης περιοχής. Στη συνέχεια θα εκχωρήσει τις τιμές τους στο δείκτη.

  • didTapAt() επιστρέφει τη συντεταγμένη από τη χτυπημένη περιοχή στον χάρτη

Βήμα 3 - Προσθήκη σχημάτων

Το SDK iOS των Χαρτών Google διευκολύνει την κατάρτιση ενός σχήματος. Θα καλύψω τον τρόπο σχεδίασης με πολυλίνες, πολύγωνα και κύκλους.

Πολυλίνες

Τα σχήματα μπορούν να κατασκευαστούν χρησιμοποιώντας γραμμές. Μπορούμε να σχεδιάσουμε γραμμές στους Χάρτες Google χρησιμοποιώντας "polylines". Το αντικείμενο που θα μας βοηθήσει με το σχέδιο ονομάζεται GMSPolyline.

Για να δημιουργήσετε μια πολυγραμμή, θα πρέπει να δημιουργήσετε μια διαδρομή χρησιμοποιώντας GMSMutablePath. Χρειάζεται δύο ή περισσότερα σημεία για να ξεκινήσει η δημιουργία μιας διαδρομής.

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

Όλα όσα πρέπει να γνωρίζετε για το Auto Layout hackernoon.com

Εγγραφείτε στο Newsletter μου: