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