Markers

اختَر النظام الأساسي: Android iOS JavaScript

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

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

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

إضافة علامة

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

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

Swift

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

Objective-C

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.

Swift

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

Objective-C

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

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

Swift

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

Objective-C

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

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

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

Swift

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

Objective-C

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

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

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

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

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

Swift

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
      

Objective-C

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".

Swift

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
    })
  }
}
      

Objective-C

@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 معتمًا تمامًا.

Swift

marker.opacity = 0.6
      

Objective-C

marker.opacity = 0.6;
      

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

تنظيم العلامة

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

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

لتغيير اتجاه محدِّد الموقع، اضبط السمة flat الخاصة بالعلامة على YES أو true.

Swift

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

Objective-C

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 إلى تدوير العلامة حول مركزها بدلاً من قاعدتها.

Swift

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

Objective-C

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

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

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