دليلك النهائي إلى Google Maps SDK على iOS ، باستخدام Swift 4

تستخدم العديد من تطبيقات iOS خرائط Google. هذه ميزة شائعة جدًا ، لذلك قررت إعداد دليل نهائي حول Google Maps SDK لنظام iOS. يغطي هذا البرنامج التعليمي كل ما قد تحتاج إلى معرفته.

آمل أن يطلب قرائي ميزات ، حتى أتمكن من توسيع هذه المقالة. سيتم توثيق كل شيء في هذا المنشور! ؟

التركيب

قبل أن نبدأ في الترميز ، يجب علينا أولاً تثبيت خرائط Google iOS SDK. قد تفضل مدير تبعية آخر ، لكنني أوصي بـ CocoaPods.

قم بإنشاء ملف Podfile داخل الدليل الجذر لمشروعك ، وانسخ الكود التالي:

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

كل ما عليك فعله هو تغيير سلسلة YOUR_TARGET_NAME بقيمة حقيقية. احفظ الملف ثم اغلقه. افتح Terminal و cd إلى الدليل الجذر للمشروع ، ثم اكتب pod install. انت انتهيت! ؟

احصل على مفتاح API

لاستخدام خرائط Google iOS SDK ، ستحتاج إلى مفتاح API. لإنشاء المفتاح ، ستحتاج إلى زيارة وحدة تحكم واجهة برمجة تطبيقات Google.

أنشئ مشروعًا ، وانتقل إلى "بيانات الاعتماد".

ثم انقر فوق "إنشاء بيانات الاعتماد"واختر مفتاح API. ستحتاج إلى تقديم معرف حزمة مشاريعك. يتم إنشاء المفتاح بواسطة معرف الحزمة الفريد ، لذلك إذا تم تغييره ، فلن تعمل خدمات خرائط Google !

انتقل إلى مشروعك ، وفي AppDelegate.swiftفصلك أضف import GoogleMaps. ثم انسخ الكود التالي إلىapplication(_:didFinishLaunchingWithOptions:)

GMSServices.provideAPIKey("YOUR_API_KEY")

Step 1 — Add a map

سأبدأ بتوضيح كيفية إعداد الخريطة مع علامة أساسية. يتم اختبار الكود الذي ستراه هنا بالتوازي أثناء كتابتي.

لنبدأ! ؟

قم بزيارة UIViewController الخاص بك (حيث تحتاج إلى إضافة الخريطة). قم بإنشاء UIView مخصص بالحجم الذي تحتاجه. قم بتعيين GMSMapViewالفصل كفئة مخصصة لـ UIView (انظر لقطة الشاشة أدناه). أيضًا ، لا تنس توصيل المفوض.

أخيرًا ، بعض التعليمات البرمجية!

دعنا نعود إلى UIViewController ونكتب بعض التعليمات البرمجية. ⌨️

️ في المقتطف أدناه ، قمت بإضافة الفصل بأكمله حتى تتمكن من الحصول على صورة أفضل لما يجري.

GMSCameraPositionتخبر الخريطة بالإحداثيات التي يجب اتخاذها كنقطة مركزية لإظهار علامة بسيطة على الخريطة ، استخدم showMarker()الوظيفة.

في نهاية الملف ، أضف امتدادًا "يخزن" GMSMapViewDelegateالطرق التي نحتاجها.

الخطوة 2 - تفويض الأساليب

سأقدم لكم الآن بعض GMSMapViewDelegateالأساليب وصلاحياتها. ✊

GMSMarker InfoWindow

في خرائط Google ، يعد InfoWindow نافذة منبثقة تحتوي على معلومات إضافية حول موقع معين. يتم عرضها عندما ينقر المستخدم على العلامة التي أضفناها أعلاه.

برنامج InfoWindow الخاص بنا قابل للتخصيص. يمكنك إرفاق UIView الخاص بك بأي مكونات تحتاجها.

لقد كتبت مثالا للتنفيذ. يفترض هذا في معظم الحالات أن الأشخاص سيستخدمون InfoWindow مخصصًا ،

  • didTapInfoWindowOf() بالكشف عندما يقوم المستخدم بالنقر فوق InfoWindow.
  • markerInfoWindow() يضيف UIView المخصص الذي نريد إظهاره للعلامة.
  • didLongPressInfoWindowOf() بالكشف عن وقت الضغط لفترة طويلة على InfoWindow.

اسحب GMSMarker

ميزة أخرى مثيرة للاهتمام في GMSMapViewDelegate هي القدرة على سحب العلامة. يمكن تحقيق ذلك بأقل قدر من التعليمات البرمجية.

كل ما عليك فعله هو تشغيل "التبديل" ، من خلال الاتصال marker.isDragabble=trueبالعلامة التي تم إنشاؤها أعلاه.

من أجل سحب العلامة ، ستحتاج إلى الضغط لفترة طويلة. إذا كنت بحاجة إلى إعلامك عندما يبدأ المستخدم في السحب وينتهي به ، فيمكنك تنفيذ طرق التفويض الثلاثة التالية:

  • didBeginDragging يخطر مرة واحدة - عند بدء السحب.
  • didDrag يُعلم أثناء سحب العلامة.
  • didEndDragging يخطر مرة واحدة - عند انتهاء السحب.

موقف GMSMarker

ماذا لو كنت بحاجة إلى تغيير GMSMarkerالموضع أثناء قيام المستخدم بالنقر على الخريطة؟ حسنًا ، GMSMapViewDelegateيقدم حلاً لذلك أيضًا. يمكن لطريقة المفوض الواحد اعتراض إحداثيات (خطوط الطول والعرض) للمنطقة التي يتم النقر عليها. سيتم بعد ذلك تعيين قيمها للعلامة.

  • didTapAt() تُرجع الإحداثي من المنطقة التي تم النقر عليها على الخريطة

الخطوة 3 - إضافة الأشكال

تُسهل حزمة SDK لخرائط Google لنظام التشغيل iOS عملية رسم الشكل. سوف أتناول كيفية الرسم مع الخطوط المتعددة والمضلعات والدوائر.

خطوط متعددة

يمكن بناء الأشكال باستخدام الخطوط. يمكننا رسم خطوط في خرائط Google باستخدام "خطوط متعددة". يسمى الكائن الذي سيساعدنا في الرسم 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

اشترك في رسالتي الإخبارية: