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 للعلامة

ينشئ المقتطف التالي علامة باستخدام رمز مخصّص مقدَّم كملف UIImage في السمة icon. يقع الرمز في منتصف لندن، إنجلترا. يفترض ال snippet أنّ تطبيقك يحتوي على صورة باسم 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، يمكنك الحصول على تسلسل هرمي لعناصر التحكّم في واجهة المستخدِم المعيارية التي تحدِّد العلامات، مع توفُّر مجموعة معيارية من إمكانات التحكّم في animatio في كلّ عرض. يمكنك تضمين تغييرات على حجم العلامة ولونها ومستويات التمويه، بالإضافة إلى تطبيق عمليات تحويل عشوائية. يتيح العنصر 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. اطّلِع على أحداث العلامات والإيماءات للتعرّف على كيفية التعامل مع أحداث علامات معيّنة. يقدّم دليل الأحداث أيضًا قائمة methods في GMSMapViewDelegate. للاطّلاع على أحداث "التجوّل الافتراضي"، يُرجى الاطّلاع على GMSPanoramaViewDelegate.