Cửa sổ thông tin

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

Cửa sổ thông tin xuất hiện trên một điểm đánh dấu.

Cửa sổ thông tin cho phép bạn hiển thị thông tin cho người dùng khi họ nhấn vào một điểm đánh dấu.

Một cửa sổ thông tin được vẽ theo hướng dựa vào màn hình của thiết bị, chính giữa phía trên điểm đánh dấu liên kết. Cửa sổ thông tin mặc định có tiêu đề được in đậm và văn bản trích đoạn nội dung bên dưới tiêu đề.

Nội dung của cửa sổ thông tin được xác định bằng thuộc tính title và snippet của điểm đánh dấu. Khi bạn nhấp vào điểm đánh dấu, cửa sổ thông tin sẽ không hiển thị nếu cả hai thuộc tính title và snippet đều trống hoặc nil.

Mỗi lần chỉ hiển thị một cửa sổ thông tin. Nếu người dùng nhấn vào một điểm đánh dấu khác, cửa sổ hiện tại sẽ bị ẩn và cửa sổ thông tin mới sẽ mở ra. Nếu người dùng nhấp vào một điểm đánh dấu đang hiển thị cửa sổ thông tin, thì cửa sổ thông tin đó sẽ đóng rồi mở lại.

Tạo một cửa sổ thông tin tuỳ chỉnh để thêm văn bản hoặc hình ảnh bổ sung. Cửa sổ thông tin tuỳ chỉnh cho phép bạn kiểm soát hoàn toàn giao diện của cửa sổ bật lên.

Thêm cửa sổ thông tin

Đoạn mã sau đây sẽ tạo một điểm đánh dấu đơn giản, chỉ có tiêu đề cho văn bản của cửa sổ thông tin.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.map = mapView;

Với thuộc tính snippet, bạn có thể thêm văn bản bổ sung sẽ xuất hiện bên dưới tiêu đề bằng phông chữ nhỏ hơn. Những chuỗi dài hơn chiều rộng của cửa sổ thông tin sẽ tự động được gói trên một vài dòng. Những thư quá dài có thể bị cắt bớt.

Swift

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView

Objective-C

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;

Hiển thị/ẩn cửa sổ thông tin

Cửa sổ thông tin được thiết kế để phản hồi các sự kiện chạm của người dùng vào điểm đánh dấu. Bạn có thể hiện hoặc ẩn cửa sổ thông tin theo phương thức lập trình bằng cách đặt thuộc tính selectedMarker của GMSMapView:

  • Đặt selectedMarker thành tên của điểm đánh dấu để hiển thị điểm đánh dấu đó.
  • Hãy đặt selectedMarker thành nil để ẩn nội dung này.

Swift

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
// Show marker
mapView.selectedMarker = london
// Hide marker
mapView.selectedMarker = nil

Objective-C

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
// Show marker
mapView.selectedMarker = london;
// Hide marker
mapView.selectedMarker = nil;

Đặt cửa sổ thông tin để tự động làm mới

Đặt tracksInfoWindowChanges trên điểm đánh dấu thành YES hoặc true nếu bạn muốn các thuộc tính mới hoặc nội dung của cửa sổ thông tin hiển thị ngay khi có thay đổi, thay vì phải đợi cửa sổ thông tin ẩn rồi hiển thị lại. Giá trị mặc định là NO hoặc false.

Swift

london.tracksInfoWindowChanges = true

Objective-C

london.tracksInfoWindowChanges = YES;

Để quyết định thời điểm đặt thuộc tính tracksInfoWindowChanges, bạn nên cân nhắc các yếu tố cần cân nhắc về hiệu suất so với ưu điểm của việc tự động vẽ lại cửa sổ thông tin. Ví dụ:

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

Ngoài ra, hãy tham khảo các lưu ý cần cân nhắc khi sử dụng thuộc tính iconView của điểm đánh dấu.

Thay đổi vị trí của cửa sổ thông tin

Một cửa sổ thông tin được vẽ theo hướng dựa vào màn hình của thiết bị, chính giữa phía trên điểm đánh dấu liên kết. Bạn có thể thay đổi vị trí của cửa sổ thông tin tương ứng với điểm đánh dấu bằng cách đặt thuộc tính infoWindowAnchor. Thuộc tính này chấp nhận CGPoint, được xác định là độ lệch (x,y), trong đó cả phạm vi x và y nằm trong khoảng từ 0,0 đến 1,0. Độ lệch mặc định là (0, 5; 0,0), tức là ở giữa trên cùng. Việc đặt độ lệch infoWindowAnchor sẽ hữu ích khi căn chỉnh cửa sổ thông tin dựa trên biểu tượng tuỳ chỉnh.

Swift

london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5)
london.icon = UIImage(named: "house")
london.map = mapView

Objective-C

london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;

Xử lý các sự kiện trên cửa sổ thông tin

Bạn có thể theo dõi các sự kiện của cửa sổ thông tin sau đây:

Để 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ề sự kiện và danh sách phương thức trên GMSMapViewDelegate.

GitHub bao gồm các mẫu minh hoạ cách xử lý các sự kiện của cửa sổ thông tin:

Cửa sổ thông tin tuỳ chỉnh

Tuỳ chỉnh nội dung của cửa sổ thông tin bằng cách tạo một lớp con của UIView giúp xác định bố cục của cửa sổ thông tin tuỳ chỉnh. Trong lớp con đó, hãy xác định khung hiển thị theo cách bạn muốn. Ví dụ: bạn có thể sử dụng các thực thể UILabel tuỳ chỉnh để hiện tiêu đề và đoạn trích của văn bản cũng như các thành phần hiển thị khác (chẳng hạn như thực thể UIImageView) để thêm hình ảnh hiển thị trong cửa sổ thông tin.

Đảm bảo rằng ViewController của bạn triển khai giao thức GMSIndoorDisplayDelegate và xác định một trình nghe cho sự kiện mapView:markerInfoWindow:. Trình nghe sự kiện này được gọi khi một điểm đánh dấu sắp được chọn, đồng thời cho phép bạn trả về một thực thể của lớp UIView tuỳ chỉnh để xác định cửa sổ thông tin tuỳ chỉnh mà điểm đánh dấu sử dụng.

Các hình ảnh bên dưới hiển thị một cửa sổ thông tin mặc định, một cửa sổ thông tin có nội dung tuỳ chỉnh và một cửa sổ thông tin có khung và nền tuỳ chỉnh.

So sánh cửa sổ thông tin

Các mã mẫu trên GitHub được cung cấp bằng SDK Maps dành cho iOS có chứa các mẫu cửa sổ thông tin tuỳ chỉnh. Ví dụ: xem định nghĩa của MarkerInfoWindowViewController.m (Objective-C) hoặc MarkerInfoWindowViewController.swift (Swift).

Hãy xem mã mẫu để biết thông tin về cách tải xuống và chạy các mẫu này.