نشانگرها

پلاتفرم را انتخاب کنید: Android iOS JavaScript

نشانگرها مکان‌های تکی را روی نقشه نشان می‌دهند.

به‌طور پیش‌فرض، نشانگرها از نماد استانداردی استفاده می‌کنند که ظاهر و حس معمول Google Maps را دارد. اگر می‌خواهید نشانگرتان را سفارشی‌سازی کنید، می‌توانید رنگ نشانگر پیش‌فرض را تغییر دهید، یا تصویر نشانگر را با نماد سفارشی جایگزین کنید، یا سایر ویژگی‌های نشانگر را تغییر دهید.

در پاسخ به رویداد کلیک روی نشانگر، می‌توانید پنجره اطلاعات را باز کنید. پنجره اطلاعات نوشتار یا تصاویر را در پنجره گفتگو بالای نشانگر نمایش می‌دهد. می‌توانید از پنجره اطلاعات پیش‌فرض برای نمایش نوشتار استفاده کنید، یا پنجره اطلاعات سفارشی خودتان را ایجاد کنید تا کنترل کاملی بر محتوای آن داشته باشید.

افزودن نشانگر

برای افزودن نشانگر، شیء 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
      

آبجکتیو-سی

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 options = GMSMapViewOptions()
options.camera = camera
let mapView = GMSMapView(options: options)
// ...
mapView.clear()
      

آبجکتیو-سی

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.camera = camera;
mapView = [[GMSMapView alloc] initWithOptions:options];
// ...
[mapView clear];
      

اگر می‌خواهید پس‌از افزودن نشانگر به نقشه آن را اصلاح کنید، مطمئن شوید که شیء GMSMarker را نگه داشته‌اید. بعداً می‌توانید با ایجاد تغییرات در این شیء، نشانگر را اصلاح کنید.

Swift

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

آبجکتیو-سی

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)
      

آبجکتیو-سی

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

سفارشی‌سازی کردن تصویر نشانگر

اگر می‌خواهید تصویر نشانگر پیش‌فرض را تغییر دهید، می‌توانید بااستفاده از ویژگی icon یا iconView نشانگر، نماد سفارشی تنظیم کنید. اگر iconView تنظیم شده باشد، API ویژگی 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
      

آبجکتیو-سی

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 options = GMSMapViewOptions()
    options.camera = camera
    let mapView = GMSMapView(options: options)
    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
    })
  }
}
      

آبجکتیو-سی

@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];
  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = camera;
  _mapView = [[GMSMapView alloc] initWithOptions:options];
  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 به ملاحظات زیر توجه کنید:

  • وقتی tracksViewChanges روی YES تنظیم شده باشد، UIView می‌تواند منابع زیادی را مصرف کند که ممکن است منجر به افزایش مصرف باتری شود. درمقابل، یک قاب UIImage ثابت است و نیازی به بازپرداخت ندارد.
  • اگر نشانگرهای زیادی روی صفحه داشته باشید و هر نشانگر UIView خودش را داشته باشد و همه نشانگرها هم‌زمان تغییرات را ردیابی کنند، ممکن است برخی‌از دستگاه‌ها برای رندر کردن نقشه با مشکل مواجه شوند.
  • iconView به تعامل کاربر پاسخ نمی‌دهد، زیرا عکس آنی از نما است.
  • صرف‌نظر از مقدار واقعی ، این نما طوری رفتار می‌کند که انگار clipsToBounds روی YES تنظیم شده است. می‌توانید تبدیل‌هایی را اعمال کنید که خارج از مرزها کار می‌کنند، اما شیئی که می‌کشید باید در مرزهای شیء باشد. همه تبدیل‌ها/تغییرات نظارت و اعمال می‌شوند. به‌طور خلاصه: نماهای فرعی باید درون نما قرار داشته باشند.
  • برای استفاده از -copyWithZone: در GMSMarker، باید ابتدا GMSMarker را کپی کنید و سپس نمونه جدیدی از iconView را در نسخه کپی تنظیم کنید. UIView از NSCopying پشتیبانی نمی‌کند، بنابراین نمی‌تواند iconView را کپی کند.

برای تصمیم‌گیری درباره زمان تنظیم ویژگی tracksViewChanges، باید ملاحظات عملکرد را درمقابل مزایای بازترسیم خودکار نشانگر بسنجید. برای مثال:

  • اگر می‌خواهید مجموعه‌ای از تغییرات را اعمال کنید، می‌توانید خصوصیت را به YES و سپس دوباره به NO تغییر دهید.
  • وقتی پویانمایی درحال اجرا است یا محتوا به‌صورت ناهمگام بار می‌شود، باید تا زمانی که کنش‌ها تکمیل شوند، ویژگی را روی YES تنظیم کنید.

تغییر دادن ماتی نشانگر

می‌توانید میزان کدر بودن نشانگر را با ویژگی opacity آن کنترل کنید. باید کدری را به‌صورت عدد اعشاری بین ۰٫۰ و ۱٫۰ مشخص کنید، که ۰ کاملاً شفاف و ۱ کاملاً کدر است.

Swift

marker.opacity = 0.6
      

آبجکتیو-سی

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
      

آبجکتیو-سی

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *londonMarker = [GMSMarker markerWithPosition:positionLondon];
londonMarker.flat = YES;
londonMarker.map = mapView;
      

چرخاندن نشانگر

می‌توانید با تنظیم ویژگی rotation، نشانگر را حول نقطه لنگر آن بچرخانید. چرخش را به‌عنوان نوع CLLocationDegrees مشخص کنید، که برحسب درجه ساعت‌گرد از موقعیت پیش‌فرض اندازه‌گیری می‌شود. وقتی نشانگر روی نقشه صاف است، موقعیت پیش‌فرض شمال است.

مثال زیر نشانگر را ۹۰ درجه می‌چرخاند. تنظیم کردن ویژگی 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
      

آبجکتیو-سی

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

رسیدگی به رویدادها در نشانگرها

می‌توانید به رویدادهایی که روی نقشه رخ می‌دهند گوش دهید، مثلاً وقتی کاربر روی نشانگر تک‌ضرب می‌زند. برای گوش دادن به رویدادها، باید پروتکل GMSMapViewDelegate را پیاده‌سازی کنید. برای آشنایی با نحوه مدیریت رویدادهای نشانگر خاص، رویدادها و اشاره‌های نشانگر را ببینید. راهنمای رویدادها همچنین فهرستی از روش‌های GMSMapViewDelegate را ارائه می‌دهد. برای رویدادهای «نمای خیابان»، GMSPanoramaViewDelegate را ببینید.