Végső útmutató a Google Maps SDK-hoz az iOS rendszeren, a Swift 4 használatával

Számos iOS-alkalmazás használja a Google Maps szolgáltatást. Ez egy nagyon gyakori szolgáltatás, ezért úgy döntöttem, hogy elkészítek egy végső útmutatót az iOS-hez készült Google Maps SDK-ról. Ez az oktatóanyag mindent lefed, amire szüksége lehet.

Remélem, hogy olvasóim szolgáltatásokat igényelnek, ezért bővíteni tudom ezt a cikket. Mindent dokumentálunk ebben a bejegyzésben! ?

Telepítés

A kódolás megkezdése előtt először telepítenünk kell a Google Maps iOS SDK-t. Lehet, hogy inkább valami más függőségkezelőt szeretne, de én a CocoaPods programot ajánlanám.

Hozzon létre egy Podfile-t a projekt gyökérkönyvtárában, és másolja a következő kódot:

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

Csak annyit kell tennie, hogy valódi értékkel megváltoztatja a YOUR_TARGET_NAME karakterláncot. Mentse a fájlt, és zárja be. Nyissa meg a terminált és a cd-t a projekt gyökérkönyvtárába, majd írja be pod install. Végeztél! ?

Szerezzen be egy API kulcsot

A Google Maps iOS SDK használatához API-kulcsra van szükség. A kulcs előállításához meg kell látogatnia a Google API konzolt.

Hozzon létre egy projektet, és keresse meg a „Hitelesítő adatok” elemet.

Ezután kattintson a "Hitelesítő adatok létrehozása" elemreés válassza ki az API kulcsot. Meg kell adnia a projektek csomag azonosítóját. A kulcsot az egyedi csomagazonosító generálja, így ha megváltozik, a Google Maps szolgáltatásai nem fognak működni !

Menjen a projektjéhez, és az AppDelegate.swiftosztályában adjon hozzá import GoogleMaps. Ezután másolja a következő kódot ide:application(_:didFinishLaunchingWithOptions:)

GMSServices.provideAPIKey("YOUR_API_KEY")

Step 1 — Add a map

Először bemutatom, hogyan állíthatja be a térképet egy alapjelzővel együtt. Az itt látható kódot párhuzamosan teszteljük, miközben írok.

Kezdjük! ?

Látogasson el az UIViewController oldalára (ahol hozzá kell adnia a térképet). Hozzon létre egy egyéni UIView-t a kívánt méretben. Rendelje hozzá az GMSMapViewosztályt egyéni osztályként az UIView-hoz (lásd az alábbi képernyőképet). Ne felejtse el összekötni a küldöttet sem.

Végül egy kis kód!

Térjünk vissza az UIViewControllerhez, és írjunk néhány kódot. ⌨️

️Az alábbi részletben felvettem az egész osztályt, így jobb képet kaphatsz arról, hogy mi történik.

GMSCameraPositionmegmondja a térképnek, hogy mely koordinátákat vegye középpontnak. Egy egyszerű jelölő megjelenítéséhez a térképen használja a showMarker()funkciót.

A fájl végén adjon hozzá egy kiterjesztést, amely „tárolja” a GMSMapViewDelegateszükséges módszereket.

2. lépés - delegálja a módszereket

Most megismertetlek néhány GMSMapViewDelegatemódszert és hatáskörüket. ✊

GMSMarker InfoWindow

A Google Térképben az InfoWindow egy felugró ablak, amely további információkat tartalmaz az adott helyről. Akkor jelenik meg, amikor a felhasználó megérinti a fentiekben hozzáadott jelölőt.

Az InfoWindow testreszabható. Csatolhatja saját UIView-ját bármilyen szükséges alkatrésszel.

Írtam egy megvalósítási példát. Ez feltételezi, hogy a legtöbb esetben az emberek egyéni InfoWindow-t fognak használni,

  • didTapInfoWindowOf() észleli, amikor a felhasználó megérinti az InfoWindow-t.
  • markerInfoWindow() hozzáadja az egyedi UIView-t, amelyet meg akarunk mutatni a jelölőn.
  • didLongPressInfoWindowOf() észleli, ha az InfoWindow hosszan megnyomva van.

Húzza a GMSMarker elemet

A GMSMapViewDelegate másik érdekes tulajdonsága a jelölő húzásának képessége. Ez minimális mennyiségű kóddal érhető el.

Mindössze annyit kell tennie, hogy bekapcsolja a „kapcsolót”, a marker.isDragabble=truefent létrehozott marker meghívásával .

A jelölő húzásához hosszú nyomógombot kell használnia. Ha értesítést kell kapnia arról, hogy a felhasználó elkezd-e húzni, akkor hajtsa végre a következő három delegált módszert:

  • didBeginDragging egyszer értesít - amikor a húzás megkezdődött.
  • didDrag értesítést kap, miközben a jelölőt húzza.
  • didEndDragging egyszer értesít - amikor a húzás befejeződött.

GMSMarker pozíció

Mi van, ha meg kell változtatnia a GMSMarkerpozíciót, miközben a felhasználó megérinti a térképet? Nos, erre is GMSMapViewDelegatekínál megoldást. Egy delegált módszer képes elfogni a megérintett terület koordinátáit (szélességi és hosszúsági). Ezután hozzárendeli az értékeiket a markerhez.

  • didTapAt() visszaadja a koordinátát a térképen a megérintett területről

3. lépés - Alakzatok hozzáadása

A Google Maps iOS SDK megkönnyíti az alakzat rajzolását. Kitérek a vonallal, sokszögekkel és körökkel történő rajzolás módjára.

Vonalláncok

Alakzatok vonalakkal építhetők. A vonalláncokat „vonalláncok” segítségével vonhatjuk meg a Google Maps-ben. Az objektumot, amely segít a rajzban, hívjuk GMSPolyline.

Vonallánc létrehozásához létre kell hoznia egy elérési utat GMSMutablePath. Két vagy több pontra van szüksége az út létrehozásához.

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

All you need to know about Auto Layouthackernoon.com

Subscribe to my Newsletter: