إضافة خريطة ذات محدّد موقع

يوضح هذا البرنامج التعليمي كيفية إضافة خريطة Google بسيطة مع محدِّد إلى تطبيق iOS. وهي تناسب الأشخاص الذين لديهم معرفة مبتدئة أو متوسطة بـ Swift أو تتوفر فيهم أهداف C إلى جانب المعرفة العامة بـ Xcode. للحصول على دليل متقدم حول إنشاء الخرائط، اقرأ دليل المطورين.

ستنشئ الخريطة التالية باستخدام هذا البرنامج التعليمي. تم وضع العلامة في سيدني، أستراليا.

لقطة شاشة تعرض خريطة عليها علامة فوق سيدني

الحصول على الرمز‏

انسخ مستودع نماذج iOS في "خرائط Google" أو نزّله على GitHub.

وكإجراء بديل، انقر على الزر التالي لتنزيل رمز المصدر:

تزويدي بالرمز البرمجي

Swift

/*
 * Copyright 2020 Google Inc. All rights reserved.
 *
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */

import UIKit
import GoogleMaps

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        // Create a GMSCameraPosition that tells the map to display the
        // coordinate -33.86,151.20 at zoom level 6.
        let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
        let mapView = GMSMapView.map(withFrame: self.view.frame, camera: camera)
        self.view.addSubview(mapView)

        // Creates a marker in the center of the map.
        let marker = GMSMarker()
        marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
        marker.title = "Sydney"
        marker.snippet = "Australia"
        marker.map = mapView
  }
}

      

Objective-C

/*
* Copyright 2020 Google Inc. All rights reserved.
*
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/

#import "ViewController.h"
#import <GoogleMaps/GoogleMaps.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
  // Do any additional setup after loading the view.
  // Create a GMSCameraPosition that tells the map to display the
  // coordinate -33.86,151.20 at zoom level 6.
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                          longitude:151.20
                                                               zoom:6];
  GMSMapView *mapView = [GMSMapView mapWithFrame:self.view.frame camera:camera];
  mapView.myLocationEnabled = YES;
  [self.view addSubview:mapView];

  // Creates a marker in the center of the map.
  GMSMarker *marker = [[GMSMarker alloc] init];
  marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
  marker.title = @"Sydney";
  marker.snippet = @"Australia";
  marker.map = mapView;
}

@end

      

البدء

مدير حزم Swift

يمكن تثبيت حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لنظام التشغيل iOS باستخدام Swift Package Manager.

  1. تأكّد من إزالة أي حزمة تطوير برامج (SDK) حالية لخرائط Google لتبعيات iOS.
  2. افتح نافذة طرفية وانتقِل إلى دليل tutorials/map-with-marker.
  3. تأكَّد من إغلاق مساحة عمل Xcode ونفِّذ الطلبات التالية:
    sudo gem install cocoapods-deintegrate cocoapods-clean
    pod deintegrate
    pod cache clean --all
    rm Podfile
    rm map-with-marker.xcworkspace
  4. افتح مشروع Xcode واحذف ملف podfile.
  5. انتقِل إلى ملف > إضافة تبعيات الحزمة.
  6. أدخِل https://github.com/googlemaps/ios-maps-sdk كعنوان URL، واضغط على Enter لسحب الحزمة، ثم انقر على إضافة حزمة.
  7. قد تحتاج إلى إعادة ضبط ذاكرة التخزين المؤقت للحزمة باستخدام ملف > الحزم > إعادة ضبط ذاكرة التخزين المؤقت للحزمة.

استخدام CocoaPods

  1. نزِّل Xcode الإصدار 15.0 أو إصدار أحدث وثبِّته.
  2. إذا لم يكن لديك CocoaPods، يمكنك تثبيته على نظام التشغيل macOS من خلال تنفيذ الأمر التالي من الوحدة الطرفية:
    sudo gem install cocoapods
  3. الانتقال إلى الدليل tutorials/map-with-marker
  4. شغِّل الأمر pod install. سيؤدي ذلك إلى تثبيت حزمة تطوير البرامج (SDK) لـ "خرائط Google" المحدّدة في Podfile، إلى جانب أي ملحقات.
  5. شغِّل pod outdated لمقارنة إصدار المجموعة المثبَّتة بأي تحديثات جديدة. إذا تم رصد إصدار جديد، شغِّل pod update لتحديث Podfile وتثبيت أحدث حزمة تطوير برامج (SDK). لمزيد من التفاصيل، يمكنك الاطّلاع على دليل CocoaPods.
  6. افتح ملف map-with-marker.xcworkspace الخاص بالمشروع (بالنقر مرّتين) لفتحه في Xcode. يجب استخدام ملف .xcworkspace لفتح المشروع.

الحصول على مفتاح واجهة برمجة تطبيقات وتفعيل واجهات برمجة التطبيقات اللازمة

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

البدء

لمزيد من التفاصيل، راجِع الحصول على مفتاح واجهة برمجة التطبيقات.

إضافة مفتاح واجهة برمجة التطبيقات إلى تطبيقك

أضِف مفتاح واجهة برمجة التطبيقات إلى AppDelegate.swift على النحو التالي:

  1. تجدر الإشارة إلى أنه تمت إضافة عبارة الاستيراد التالية إلى الملف:
    import GoogleMaps
  2. عدِّل السطر التالي في طريقة application(_:didFinishLaunchingWithOptions:)، مع استبدال YOUR_API_KEY بمفتاح واجهة برمجة التطبيقات:
    GMSServices.provideAPIKey("YOUR_API_KEY")

إنشاء تطبيقك وتشغيله

  1. يمكنك توصيل جهاز iOS بجهاز الكمبيوتر أو اختيار محاكي من قائمة مخطَّط Xcode.
  2. وإذا كنت تستخدم جهازًا، فتأكَّد من تمكين خدمات الموقع الجغرافي. إذا كنت تستخدم محاكيًا، اختَر موقعًا جغرافيًا من قائمة الميزات.
  3. في Xcode، انقر على خيار القائمة Product/Run (أو رمز الزر "تشغيل").
    • ينشئ Xcode التطبيق، ثم يشغله على الجهاز أو على المحاكي.
    • من المفترض أن تظهر لك خريطة ذات علامة موضوعة في وسط سيدني على الساحل الشرقي لأستراليا، مماثلة للصورة المعروضة في هذه الصفحة.

تحرّي الخلل وإصلاحه:

  • إذا لم تظهر لك خريطة، تأكَّد من أنّك حصلت على مفتاح واجهة برمجة التطبيقات وأضفته إلى التطبيق، كما هو موضّح سابقًا. راجِع وحدة تصحيح الأخطاء في Xcode بحثًا عن رسائل الخطأ حول مفتاح واجهة برمجة التطبيقات.
  • في حال حظر مفتاح واجهة برمجة التطبيقات من خلال معرِّف حزمة iOS، عدِّل المفتاح لإضافة معرِّف الحزمة للتطبيق: com.google.examples.map-with-marker.
  • تأكَّد من توفُّر اتصال جيد بشبكة Wi-Fi أو نظام تحديد المواقع العالمي (GPS).
  • استخدِم أدوات تصحيح أخطاء Xcode لعرض السجلّات وتصحيح أخطاء التطبيق.

فهم الرمز البرمجي

  1. أنشئ خريطة واضبطها على وضع العرض في "viewDidLoad()".

    Swift

    // Create a GMSCameraPosition that tells the map to display the
    // coordinate -33.86,151.20 at zoom level 6.
    let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
    let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
    view = mapView
          

    Objective-C

    // Create a GMSCameraPosition that tells the map to display the
    // coordinate -33.86,151.20 at zoom level 6.
    GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                            longitude:151.20
                                                                 zoom:6.0];
    GMSMapView *mapView = [[GMSMapView alloc] initWithFrame: CGRectZero camera:camera];
    self.view = mapView;
          
  2. أضِف محدِّد الموقع إلى الخريطة في viewDidLoad().

    Swift

    // Creates a marker in the center of the map.
    let marker = GMSMarker()
    marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
    marker.title = "Sydney"
    marker.snippet = "Australia"
    marker.map = mapView
          

    Objective-C

    // Creates a marker in the center of the map.
    GMSMarker *marker = [[GMSMarker alloc] init];
    marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
    marker.title = @"Sydney";
    marker.snippet = @"Australia";
    marker.map = mapView;
          

تعرض حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لتطبيقات iOS تلقائيًا محتوى نافذة المعلومات عندما ينقر المستخدم على محدّد موقع. ليست هناك حاجة لإضافة مستمع نقر إلى العلامة إذا كنت ترغب في استخدام السلوك الافتراضي.

تهانينا! لقد أنشأت تطبيق iOS يعرض خريطة Google مع علامة للإشارة إلى موقع معين. لقد تعلمت أيضًا كيفية استخدام حزمة SDK لـ "خرائط Google" لنظام التشغيل iOS.

الخطوات التالية

تعرف على مزيد من المعلومات حول كائن الخريطة وما يمكنك فعله باستخدام العلامات.