نشانگرها

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

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

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

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

اضافه کردن نشانگر

برای افزودن یک نشانگر، یک شی GMSMarker ایجاد کنید که شامل position و title باشد و map آن را تنظیم کنید.

مثال زیر نحوه اضافه کردن نشانگر به یک شی GMSMapView موجود را نشان می دهد. نشانگر در مختصات 10,10 ایجاد می شود و رشته "Hello world" را در پنجره اطلاعات با کلیک روی آن نمایش می دهد.

سویفت

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView
      

هدف-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 ، می توانید یک نشانگر را از نقشه حذف کنید. از طرف دیگر، می‌توانید با فراخوانی روش clear GMSMapView ، همه پوشش‌ها (از جمله نشانگرها) را که در حال حاضر روی نقشه هستند حذف کنید.

سویفت

let camera = GMSCameraPosition.camera(
  withLatitude: -33.8683,
  longitude: 151.2086,
  zoom: 6
)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
// ...
mapView.clear()
      

هدف-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
// ...
[mapView clear];
      

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

سویفت

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

هدف-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
// ...
marker.map = nil;
      

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

می‌توانید رنگ تصویر نشانگر پیش‌فرض را با درخواست یک نسخه رنگی از نماد پیش‌فرض با markerImageWithColor: و ارسال تصویر به‌دست‌آمده به ویژگی نماد GMSMarker سفارشی کنید.

سویفت

marker.icon = GMSMarker.markerImage(with: .black)
      

هدف-C

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

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

اگر می‌خواهید تصویر نشانگر پیش‌فرض را تغییر دهید، می‌توانید با استفاده از icon نشانگر یا ویژگی iconView یک نماد سفارشی تنظیم کنید. اگر iconView تنظیم شده باشد، API ویژگی icon را نادیده می گیرد.

با استفاده از ویژگی icon نشانگر

قطعه زیر یک نشانگر با یک نماد سفارشی ارائه شده به عنوان UIImage در ویژگی icon ایجاد می کند. این نماد در لندن، انگلستان قرار دارد. این قطعه فرض می کند که برنامه شما حاوی تصویری به نام "house.png" است.

سویفت

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
      

هدف-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" است.

سویفت

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
    })
  }
}
      

هدف-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 را می‌پذیرد، می‌توانید سلسله مراتبی از کنترل‌های استاندارد UI داشته باشید که نشانگرهای شما را تعریف می‌کنند، هر نما دارای مجموعه استانداردی از قابلیت‌های انیمیشن است. می‌توانید تغییراتی در اندازه نشانگر، رنگ و سطوح آلفا و همچنین اعمال تبدیل‌های دلخواه اعمال کنید. ویژگی iconView از انیمیشن تمام ویژگی‌های متحرک UIView به جز frame و center پشتیبانی می‌کند.

لطفاً هنگام استفاده از iconView به نکات زیر توجه کنید:

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

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

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

تغییر شفافیت نشانگر

شما می توانید کدورت یک نشانگر را با خاصیت opacity آن کنترل کنید. شما باید کدورت را به عنوان یک شناور بین 0.0 و 1.0 مشخص کنید، جایی که 0 کاملاً شفاف و 1 کاملاً مات است.

سویفت

marker.opacity = 0.6
      

هدف-C

marker.opacity = 0.6;
      

می‌توانید کدورت نشانگر را با Core Animation با استفاده از GMSMarkerLayer متحرک کنید.

صاف کردن یک نشانگر

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

می توانید جهت یک نشانگر را به صورت صاف در برابر زمین تنظیم کنید. نشانگرهای مسطح زمانی که نقشه می چرخد ​​می چرخند و وقتی نقشه کج می شود چشم انداز را تغییر می دهند. مانند نشانگرهای معمولی، نشانگرهای مسطح هنگام بزرگنمایی یا کوچکنمایی نقشه، اندازه خود را حفظ می کنند.

برای تغییر جهت نشانگر، ویژگی flat نشانگر را روی YES یا true تنظیم کنید.

سویفت

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let londonMarker = GMSMarker(position: positionLondon)
londonMarker.isFlat = true
londonMarker.map = mapView
      

هدف-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 باعث می شود که نشانگر به جای پایه خود به دور مرکز خود بچرخد.

سویفت

let degrees = 90.0
londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
londonMarker.rotation = degrees
londonMarker.map = mapView
      

هدف-C

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

مدیریت رویدادها روی نشانگرها

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