تشير العلامات إلى مواقع فردية على الخريطة.
بشكل افتراضي، تستخدم العلامات رمزًا قياسيًا له الشكل الشائع لخرائط 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