Ваш крајњи водич за Гоогле Мапс СДК на иОС-у, користећи Свифт 4

Многе иОС апликације користе Гоогле мапе. Ово је врло честа карактеристика, па сам одлучио да припремим врхунски водич за Гоогле Мапс СДК за иОС. Овај водич покрива све што бисте можда требали знати.

Надам се да ће моји читаоци затражити функције, па могу да проширим овај чланак. Све ће бити документовано у овом посту! ?

Инсталација

Пре него што започнемо са кодирањем, прво морамо да инсталирамо Гоогле Мапс иОС СДК. Можда бисте волели неког другог менаџера зависности, али ја бих препоручио ЦоцоаПодс.

Направите Подфиле унутар основног директоријума вашег пројекта и копирајте следећи код:

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

Све што треба да урадите је да промените низ ИОУР_ТАРГЕТ_НАМЕ са стварном вредношћу. Сачувајте датотеку и затворите је. Отворите терминал и цд у основни директоријум пројекта, а затим откуцајте pod install. Готови сте! ?

Набавите АПИ кључ

Да бисте користили Гоогле Мапс иОС СДК, требаће вам АПИ кључ. Да бисте генерисали кључ, мораћете да посетите Гоогле АПИ конзолу.

Направите пројекат и идите до „Акредитиви“.

Затим кликните на „Генериши акредитиве“и изаберите АПИ Кеи. Морате да наведете ИД пакета пројеката. Кључ генерише јединствени ИД пакета, па ако се промени, услуге Гоогле Мапс неће радити !

Идите на свој пројекат и AppDelegate.swiftдодајте на часу import GoogleMaps. Затим копирајте следећи код уapplication(_:didFinishLaunchingWithOptions:)

GMSServices.provideAPIKey("YOUR_API_KEY")

Step 1 — Add a map

За почетак ћу вам показати како да поставите мапу заједно са основним маркером. Код који ћете овде видети тестира се паралелно док пишем.

Почнимо! ?

Посетите свој УИВиевЦонтроллер (где треба да додате мапу). Направите прилагођени УИВиев са потребном величином. УИВиеву доделите GMSMapViewкласу као прилагођену класу (погледајте снимак екрана испод). Такође, не заборавите да повежете делегата.

Коначно, неки код!

Вратимо се на УИВиевЦонтроллер и напишите неки код. ⌨

У доњи исечак додао сам цео разред како бисте могли да добијете бољу слику о томе шта се догађа.

GMSCameraPositionговори мапи које координате треба узети као средишњу тачку. Да бисте приказали једноставан маркер на мапи, користите showMarker()функцију.

На крају датотеке додајте екстензију која ће „чувати“ GMSMapViewDelegateметоде које су нам потребне.

Корак 2 - Методе делегирања

Сад ћу вам представити неке GMSMapViewDelegateметоде и њихове моћи. ✊

ГМСМаркер ИнфоВиндов

У Гоогле мапама, Инфо Прозор је искачући прозор са додатним информацијама о датој локацији. Приказује се када корисник тапне на маркер који смо горе додали.

Наш ИнфоВиндов је прилагодљив. Можете да прикачите свој УИВиев са било којим компонентама које су вам потребне.

Написао сам пример примене. То претпоставља да ће у већини случајева људи користити прилагођени ИнфоВиндов,

  • didTapInfoWindowOf() открива када корисник тапка на ИнфоВиндов.
  • markerInfoWindow() додаје прилагођени УИВиев који желимо да прикажемо маркеру.
  • didLongPressInfoWindowOf() препознаје када је ИнфоВиндов дуго притиснут.

Превуците ГМСМаркер

Another interesting feature in GMSMapViewDelegate is the ability to drag the marker. This can be achieved with a minimal amount of code.

All you have to do is turn on the “switch”, by calling marker.isDragabble=trueon the marker created above.

In order to drag the marker, you will need to use a long press. If you need to be notified when the user starts and ends dragging, you can implement these three delegate methods:

  • didBeginDragging notifies once — when the dragging has started.
  • didDrag notifies while the marker is being dragged.
  • didEndDragging notifies once — when the dragging has ended.

GMSMarker position

What if you need to change the GMSMarker position while the user is tapping on the map? Well, GMSMapViewDelegate offers a solution for that as well. A single delegate method can intercept the coordinates (latitude and longitude) of the tapped area. It will then assign their values to the marker.

  • didTapAt() returns the coordinate from the tapped area on the map

Step 3 — Adding shapes

The Google Maps iOS SDK makes it simple to draw a shape. I will cover how to draw with polylines, polygons and circles.

Polylines

Shapes can be built using lines. We can draw lines in Google Maps using ‘polylines’. The object that will help us with the drawing is called GMSPolyline.

To create a polyline, you will need to create a path using GMSMutablePath. It needs two or more points to start creating a path.

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

Све што треба да знате о Ауто Лаиоут-у хацкерноон.цом

Претплатите се на мој билтен: