Markers

تشير العلامات إلى مواقع فردية على الخريطة.

بشكل افتراضي، تستخدم العلامات رمزًا قياسيًا له شكل ومظهر خرائط Google الشائعين. إذا كنت ترغب في تخصيص العلامة، فيمكنك تغيير لون العلامة الافتراضية، أو استبدال صورة العلامة بأيقونة مخصصة، أو تغيير الخصائص الأخرى للعلامة.

استجابة لحدث نقر على محدِّد، يمكنك فتح نافذة معلومات. تعرض نافذة المعلومات نصًا أو صورًا في نافذة حوار فوق المحدد. يمكنك استخدام نافذة معلومات افتراضية لعرض النص أو إنشاء نافذة معلومات مخصصة للتحكم في محتواها بشكل كامل.

إضافة علامة

لإضافة علامة، عليك إنشاء عنصر GMSMarker يتضمّن position وtitle، وضبط map.

يعرض المثال التالي كيفية إضافة علامة إلى عنصر GMSMapView حالي. يتم إنشاء العلامة عند إحداثيات 10,10، وتعرض السلسلة "مرحبًا بالعالم" في نافذة معلومات عند النقر عليها.

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView
      

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.title = @"Hello World";
marker.map = mapView;
      

يمكنك تحريك إضافة علامات جديدة إلى الخريطة من خلال ضبط السمة marker.appearAnimation على:

• kGMSMarkerAnimationPop لجعل العلامة ينبثق من groundAnchor عند إضافتها.
• kGMSMarkerAnimationFadeIn لتجعل العلامة يتلاشى عند إضافتها.

إزالة علامة

يمكنك إزالة محدِّد من الخريطة من خلال ضبط السمة map في GMSMarker على nil. بدلاً من ذلك، يمكنك إزالة جميع التراكبات (بما في ذلك العلامات) الموجودة حاليًا على الخريطة من خلال استدعاء طريقة clear GMSMapView.

let camera = GMSCameraPosition.camera(
  withLatitude: -33.8683,
  longitude: 151.2086,
  zoom: 6
)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
// ...
mapView.clear()
      

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
// ...
[mapView clear];
      

إذا كنت تريد إجراء تعديلات على علامة بعد إضافتها إلى الخريطة، احرص على الاحتفاظ بالكائن GMSMarker. يمكنك تعديل العلامة لاحقًا عن طريق إجراء تغييرات على هذا الكائن.

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.map = mapView
// ...
marker.map = nil
      

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
// ...
marker.map = nil;
      

تغيير لون العلامة

يمكنك تخصيص لون صورة العلامة التلقائية عن طريق طلب إصدار ملون من الرمز التلقائي باستخدام markerImageWithColor:، وتمرير الصورة الناتجة إلى خاصية الرمز GMSMarker.

marker.icon = GMSMarker.markerImage(with: .black)
      

marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];
      

تخصيص صورة العلامة

إذا كنت ترغب في تغيير صورة العلامة التلقائية، يمكنك تعيين رمز مخصص، باستخدام خاصية icon أو iconView للعلامة. في حال ضبط iconView، تتجاهل واجهة برمجة التطبيقات السمة icon.

استخدام خاصية icon للعلامة

ينشئ المقتطف التالي علامة مع رمز مخصّص يتم توفيره على شكل UIImage في السمة icon. يقع هذا الرمز في لندن بإنجلترا. يفترض المقتطف أن تطبيقك يحتوي على صورة باسم "house.png".

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: positionLondon)
london.title = "London"
london.icon = UIImage(named: "house")
london.map = mapView
      

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:positionLondon];
london.title = @"London";
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;
      

إذا كنت تنشئ عدة علامات باستخدام الصورة نفسها، استخدِم مثيل UIImage نفسه لكل علامة. سيساعد ذلك في تحسين أداء تطبيقك عند عرض العديد من العلامات.

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

استخدام خاصية iconView للعلامة

ينشئ المقتطف التالي علامة برمز مخصص عن طريق تعيين خاصية iconView للعلامة، وتحريك تغيير في لون العلامة. يفترض المقتطف أن تطبيقك يحتوي على صورة باسم "house.png".

import CoreLocation
import GoogleMaps

class MarkerViewController: UIViewController, GMSMapViewDelegate {
  var mapView: GMSMapView!
  var london: GMSMarker?
  var londonView: UIImageView?

  override func viewDidLoad() {
    super.viewDidLoad()

    let camera = GMSCameraPosition.camera(
      withLatitude: 51.5,
      longitude: -0.127,
      zoom: 14
    )
    let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
    view = mapView

    mapView.delegate = self

    let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate)
    let markerView = UIImageView(image: house)
    markerView.tintColor = .red
    londonView = markerView

    let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
    let marker = GMSMarker(position: position)
    marker.title = "London"
    marker.iconView = markerView
    marker.tracksViewChanges = true
    marker.map = mapView
    london = marker
  }

  func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
    UIView.animate(withDuration: 5.0, animations: { () -> Void in
      self.londonView?.tintColor = .blue
    }, completion: {(finished) in
      // Stop tracking view changes to allow CPU to idle.
      self.london?.tracksViewChanges = false
    })
  }
}
      

@import CoreLocation;
@import GoogleMaps;

@interface MarkerViewController : UIViewController <GMSMapViewDelegate>
@property (strong, nonatomic) GMSMapView *mapView;
@end

@implementation MarkerViewController {
  GMSMarker *_london;
  UIImageView *_londonView;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5
                                                          longitude:-0.127
                                                               zoom:14];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;

  _mapView.delegate = self;

  UIImage *house = [UIImage imageNamed:@"House"];
  house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
  _londonView = [[UIImageView alloc] initWithImage:house];
  _londonView.tintColor = [UIColor redColor];

  CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
  _london = [GMSMarker markerWithPosition:position];
  _london.title = @"London";
  _london.iconView = _londonView;
  _london.tracksViewChanges = YES;
  _london.map = self.mapView;
}

- (void)mapView:(GMSMapView *)mapView idleAtCameraPosition:(GMSCameraPosition *)position {
  [UIView animateWithDuration:5.0
                   animations:^{
    self->_londonView.tintColor = [UIColor blueColor];
  }
                   completion:^(BOOL finished) {
    // Stop tracking view changes to allow CPU to idle.
    self->_london.tracksViewChanges = NO;
  }];
}

@end
      

نظرًا لأن iconView تقبل UIView، يمكن أن يكون لديك تسلسل هرمي من عناصر التحكم القياسية في واجهة المستخدم التي تحدد العلامات، كل عرض له المجموعة القياسية من إمكانيات الرسوم المتحركة. يمكنك تضمين تغييرات في حجم العلامة ولونها ومستويات ألفا، بالإضافة إلى تطبيق التحويلات العشوائية. تتيح السمة iconView استخدام صور متحركة لجميع خصائص UIView المتحركة باستثناء frame وcenter.

يُرجى مراعاة الاعتبارات التالية عند استخدام iconView:

• قد يتطلَّب UIView الموارد المطلوبة عند ضبط tracksViewChanges على YES، ما قد يؤدي إلى زيادة استخدام البطارية. في المقابل، يكون الإطار الواحد UIImage ثابتًا ولا يحتاج إلى إعادة عرضه.
• قد يصعب على بعض الأجهزة عرض الخريطة إذا كان لديك العديد من العلامات على الشاشة، ولكل علامة UIView الخاص بها، وجميع العلامات تتعقب التغييرات في الوقت نفسه.
• لا تستجيب السمة iconView لتفاعل المستخدم، لأنّها تقدّم نبذة عن المحتوى.
• تعمل طريقة العرض كما لو تم ضبط clipsToBounds على YES، بغض النظر عن قيمتها الفعلية. يمكنك تطبيق عمليات التحويل التي تعمل خارج الحدود، ولكن يجب أن يكون الكائن الذي ترسمه ضمن حدود الكائن. تتم مراقبة جميع عمليات التحويل/التحوّلات وتطبيقها. باختصار: يجب تضمين المشاهدات الفرعية ضمن إطار العرض.

لتحديد وقت ضبط السمة tracksViewChanges، يجب مراعاة اعتبارات الأداء مقابل مزايا إعادة رسم العلامة تلقائيًا. مثلاً:

• إذا أردت إجراء سلسلة من التغييرات، يمكنك تغيير الموقع إلى YES ثم الرجوع إلى NO.
• عند تشغيل صورة متحركة أو تحميل المحتوى بشكل غير متزامن، يجب ضبط السمة على YES إلى أن تكتمل الإجراءات.

تغيير درجة تعتيم العلامة

ويمكنك التحكّم في مدى تعتيم العلامة باستخدام السمة opacity. ينبغي لك تحديد معدل التعتيم كعدد عائم بين 0.0 و1.0، حيث يكون الرقم 0 شفافًا تمامًا والرقم 1 معتمًا تمامًا.

marker.opacity = 0.6
      

marker.opacity = 0.6;
      

يمكنك تحريك تعتيم العلامة باستخدام [Core Animation]الرسوم المتحركة الأساسية باستخدام GMSMarkerLayer.

تقسيم العلامة

عادة ما يتم رسم رموز العلامات على شاشة الجهاز بدلاً من سطح الخريطة، لذا فإن تدوير الخريطة أو إمالتها أو تكبيرها/تصغيرها لا يؤدي بالضرورة إلى تغيير اتجاه العلامة.

يمكنك تعيين اتجاه العلامة ليكون مستويًا على الأرض. تدور العلامات المسطحة عند تدوير الخريطة، وتغير المنظور عند إمالة الخريطة. كما هو الحال مع العلامات العادية، تحتفظ العلامات المسطحة بحجمها عند تكبير الخريطة أو تصغيرها.

لتغيير اتجاه العلامة، اضبط سمة flat للعلامة على YES أو true.

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let londonMarker = GMSMarker(position: positionLondon)
londonMarker.isFlat = true
londonMarker.map = mapView
      

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *londonMarker = [GMSMarker markerWithPosition:positionLondon];
londonMarker.flat = YES;
londonMarker.map = mapView;
      

تدوير العلامة

يمكنك تدوير علامة حول نقطة الارتساء الخاصة بها من خلال ضبط السمة rotation. حدِّد التدوير كنوع CLLocationDegrees، حيث يتم قياسه بالدرجات في اتجاه عقارب الساعة من الموضع التلقائي. عندما تكون العلامة مسطحة على الخريطة، فإن الموضع الافتراضي هو الشمال.

في المثال التالي، يتم تدوير العلامة بزاوية 90 درجة. يؤدي ضبط الخاصية groundAnchor على 0.5,0.5 إلى تدوير العلامة حول وسطها بدلاً من قاعدتها.

let degrees = 90.0
londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
londonMarker.rotation = degrees
londonMarker.map = mapView
      

CLLocationDegrees degrees = 90;
londonMarker.groundAnchor = CGPointMake(0.5, 0.5);
londonMarker.rotation = degrees;
londonMarker.map = mapView;
      

التعامل مع الأحداث على العلامات

يمكنك الاستماع إلى الأحداث التي تقع على الخريطة، مثل عندما ينقر المستخدم على علامة. للاستماع إلى الأحداث، يجب تطبيق بروتوكول GMSMapViewDelegate. يمكنك الاطّلاع على أحداث العلامات والإيماءات لمعرفة كيفية التعامل مع أحداث محدّدات الموقع. يوفّر دليل الأحداث أيضًا قائمة بالطرق على GMSMapView المرسَلة. بالنسبة إلى أحداث "التجوّل الافتراضي"، يُرجى الاطّلاع على GMSPanoramaViewDelegate.