Markers

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

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

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

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

إضافة علامة

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

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

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

استخدام سمة "رمز" العلامة

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

يمكنك تحريك تعتيم العلامة باستخدام الصور المتحركة الأساسية من خلال 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.