Đánh dấu

Chọn nền tảng: Android iOS JavaScript

Các điểm đánh dấu biểu thị một vị trí duy nhất trên bản đồ.

Theo mặc định, các điểm đánh dấu sử dụng một biểu tượng chuẩn có giao diện và cảm nhận chung của Google Maps. Nếu muốn tùy chỉnh điểm đánh dấu, bạn có thể thay đổi màu của điểm đánh dấu mặc định, hoặc thay thế hình ảnh của điểm đánh dấu bằng biểu tượng tùy chỉnh hoặc thay đổi thuộc tính khác của điểm đánh dấu.

Để phản hồi lại sự kiện nhấp chuột trên một điểm đánh dấu, bạn có thể mở một cửa sổ thông tin. Cửa sổ thông tin sẽ hiển thị văn bản hoặc hình ảnh trong cửa sổ bật lên phía trên điểm đánh dấu. Bạn có thể sử dụng cửa sổ thông tin mặc định để hiển thị văn bản, hoặc tạo cửa sổ thông tin tuỳ chỉnh của riêng mình để kiểm soát hoàn toàn nội dung.

Thêm điểm đánh dấu

Để thêm điểm đánh dấu, hãy tạo một đối tượng GMSMarker bao gồm position và title, đồng thời đặt map.

Ví dụ sau minh hoạ cách thêm điểm đánh dấu vào đối tượng GMSMapView hiện có. Điểm đánh dấu được tạo tại toạ độ 10,10 và hiển thị chuỗi "Hello world" trong cửa sổ thông tin khi được nhấp vào.

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;

Bạn có thể tạo ảnh động cho việc thêm các điểm đánh dấu mới vào bản đồ bằng cách đặt thuộc tính marker.appearAnimation thành:

  • kGMSMarkerAnimationPop để làm cho điểm đánh dấu bật lên từ groundAnchor khi được thêm.
  • kGMSMarkerAnimationFadeIn để làm cho điểm đánh dấu mờ dần khi được thêm.

Xóa điểm đánh dấu

Bạn có thể xoá một điểm đánh dấu khỏi bản đồ bằng cách đặt thuộc tính map của GMSMarker thành nil. Ngoài ra, bạn có thể xoá tất cả lớp phủ (bao gồm cả các điểm đánh dấu) hiện có trên bản đồ bằng cách gọi phương thức 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];

Nếu bạn muốn sửa đổi một điểm đánh dấu sau khi đã thêm điểm đánh dấu đó vào bản đồ, hãy đảm bảo bạn giữ đối tượng GMSMarker. Bạn có thể sửa đổi điểm đánh dấu sau này bằng cách thực hiện thay đổi đối với đối tượng này.

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;

Thay đổi màu điểm đánh dấu

Bạn có thể tuỳ chỉnh màu của hình ảnh đánh dấu mặc định bằng cách yêu cầu phiên bản phủ màu của biểu tượng mặc định với markerImageWithColor:, và chuyển hình ảnh thu được đến thuộc tính biểu tượng của GMSMarker.

Swift

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

Objective-C

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

Tùy chỉnh hình ảnh điểm đánh dấu

Nếu muốn thay đổi hình ảnh điểm đánh dấu mặc định, bạn có thể đặt biểu tượng tùy chỉnh bằng cách sử dụng thuộc tính icon hoặc iconView của điểm đánh dấu.

Nếu bạn đặt iconView, API sẽ bỏ qua thuộc tính icon. Các bản cập nhật cho icon hiện tại sẽ không được nhận dạng nếu bạn đặt iconView.

Sử dụng thuộc tính `icon` của điểm đánh dấu

Đoạn mã sau đây sẽ tạo một điểm đánh dấu có biểu tượng tùy chỉnh được cung cấp dưới dạng UIImage trong thuộc tính icon. Biểu tượng này tập trung ở London, Anh. Đoạn mã giả định rằng ứng dụng của bạn có chứa một hình ảnh có tên là "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;

Nếu bạn đang tạo nhiều điểm đánh dấu có cùng một hình ảnh, hãy sử dụng cùng một phiên bản của UIImage cho mỗi điểm đánh dấu. Điều này giúp cải thiện hiệu suất của ứng dụng khi hiển thị nhiều điểm đánh dấu.

Hình ảnh này có thể có nhiều khung hình. Ngoài ra, thuộc tính alignmentRectInsets cũng được tuân thủ. Điều này rất hữu ích nếu điểm đánh dấu có bóng hoặc khu vực không sử dụng khác.

Sử dụng thuộc tính `iconView` của điểm đánh dấu

Đoạn mã sau đây sẽ tạo một điểm đánh dấu có biểu tượng tùy chỉnh bằng cách đặt thuộc tính iconView của điểm đánh dấu, cũng như tạo ảnh động cho sự thay đổi về màu sắc của điểm đánh dấu. Đoạn mã giả định rằng ứng dụng của bạn có chứa một hình ảnh có tên "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

Vì iconView chấp nhận một UIView, nên bạn có thể có hệ thống phân cấp các thành phần điều khiển giao diện người dùng tiêu chuẩn để xác định điểm đánh dấu, mỗi thành phần hiển thị có một tập hợp các tính năng ảnh động tiêu chuẩn. Bạn có thể đưa vào các thay đổi về kích thước điểm đánh dấu, màu sắc và mức độ alpha, cũng như áp dụng các biến đổi tuỳ ý. Thuộc tính iconView hỗ trợ ảnh động của tất cả các thuộc tính có thể tạo hình ảnh của UIView, ngoại trừ frame và center.

Sau đây là những điểm cần lưu ý khi sử dụng iconView:

  • UIView có thể đòi hỏi tài nguyên khi tracksViewChanges được đặt thành YES, điều này có thể làm tăng mức sử dụng pin. Trong khi đó, một khung UIImage duy nhất là tĩnh và không cần phải hiển thị lại.
  • Một số thiết bị có thể gặp khó khăn khi hiển thị bản đồ nếu bạn có nhiều điểm đánh dấu trên màn hình và mỗi điểm đánh dấu có một UIView riêng và tất cả các điểm đánh dấu đều đang theo dõi các thay đổi.
  • iconView không phản hồi tương tác của người dùng vì đây là ảnh chụp nhanh của thành phần hiển thị.
  • Chế độ xem hoạt động như thể clipsToBounds được đặt thành YES, bất kể giá trị thực tế là gì. Bạn có thể áp dụng các phép biến đổi hoạt động bên ngoài ranh giới, nhưng đối tượng bạn vẽ phải nằm trong ranh giới của đối tượng. Mọi lượt chuyển đổi/chuyển đổi đều được theo dõi và áp dụng. Tóm lại: các chế độ xem phụ phải nằm trong chế độ xem.

Để quyết định thời điểm đặt thuộc tính tracksViewChanges, bạn nên cân nhắc các yếu tố về hiệu suất so với ưu điểm là tự động vẽ lại điểm đánh dấu. Ví dụ:

  • Nếu có một loạt thay đổi để thực hiện, bạn có thể thay đổi thuộc tính thành YES, sau đó quay lại NO.
  • Khi một ảnh động đang chạy hoặc nội dung được tải không đồng bộ, bạn nên đặt thuộc tính này thành YES cho đến khi hoàn tất các thao tác.

Thay đổi độ mờ điểm đánh dấu

Bạn có thể kiểm soát độ mờ của điểm đánh dấu bằng thuộc tính opacity. Bạn nên chỉ định độ mờ dưới dạng số thực có độ chính xác đơn nằm trong khoảng từ 0 đến 1, trong đó 0 là hoàn toàn trong suốt và 1 là độ mờ hoàn toàn.

Swift

marker.opacity = 0.6

Objective-C

marker.opacity = 0.6;

Bạn có thể tạo ảnh động cho độ mờ điểm đánh dấu bằng Ảnh động chính thông qua GMSMarkerLayer.

Làm phẳng điểm đánh dấu

Các biểu tượng đánh dấu thường được vẽ theo hướng của màn hình thiết bị thay vì giao diện của bản đồ, vì vậy, việc xoay, nghiêng hoặc thu phóng bản đồ không nhất thiết phải thay đổi hướng của điểm đánh dấu.

Bạn có thể đặt hướng của điểm đánh dấu là phẳng so với mặt đất. Điểm đánh dấu phẳng xoay khi bản đồ được xoay và thay đổi phối cảnh khi bản đồ được nghiêng. Giống như các điểm đánh dấu thông thường, các điểm đánh dấu phẳng giữ nguyên kích thước của chúng khi bản đồ được phóng to hoặc thu nhỏ.

Để thay đổi hướng của điểm đánh dấu, hãy đặt thuộc tính flat của điểm đánh dấu thành YES hoặc 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;

Xoay điểm đánh dấu

Bạn có thể xoay điểm đánh dấu xung quanh điểm neo bằng cách đặt thuộc tính rotation. Chỉ định chế độ xoay là loại CLLocationDegrees, được đo bằng độ theo chiều kim đồng hồ từ vị trí mặc định. Khi điểm đánh dấu phẳng trên bản đồ, vị trí mặc định là Bắc.

Ví dụ sau đây xoay điểm đánh dấu 90°. Việc đặt thuộc tính groundAnchor thành 0.5,0.5 sẽ làm cho điểm đánh dấu được xoay xung quanh trung tâm, thay vì căn cứ.

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;

Xử lý sự kiện trên điểm đánh dấu

Bạn có thể nghe các sự kiện xảy ra trên bản đồ, chẳng hạn như khi người dùng nhấn vào một điểm đánh dấu. Để theo dõi các sự kiện, bạn phải triển khai giao thức GMSMapViewDelegate. Xem hướng dẫn về các sự kiện và danh sách các phương thức trên GMSMapViewDelegate. Đối với các sự kiện Chế độ xem phố, hãy xem GMSPanoramaViewDelegate.