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. بدلاً من ذلك، يمكنك إزالة جميع التراكبات (بما في ذلك المحددات) الموجودة حاليًا على الخريطة عن طريق استدعاء طريقة GMSMapView clear.

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 الحالية طالما تم ضبط iconView.

استخدام خاصية `رمز` العلامة

ينشئ المقتطف التالي محدّدًا برمز مخصّص يتم توفيره كعلامة 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;
      

يمكنك تحريك تعتيم العلامة باستخدام الرسوم المتحركة الأساسية عبر 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. يمكنك الاطّلاع على دليل الأحداث وقائمة الطرق المتاحة على GMSMapViewDelegate. بالنسبة إلى أحداث "التجوّل الافتراضي"، يمكنك الاطّلاع على GMSPanoramaViewDelegate.