Thêm bản đồ vào ứng dụng iOS (Swift)

1. Trước khi bắt đầu

Lớp học lập trình này hướng dẫn bạn cách bắt đầu sử dụng Google Maps Platform để tạo ứng dụng iOS bằng Swift. Bạn sẽ tạo một ứng dụng iOS thực hiện những việc sau:

• Tải Maps SDK cho iOS và Maps SDK cho Thư viện tiện ích iOS.
• Hiển thị bản đồ có tâm là Sydney, Úc.
• Hiển thị các điểm đánh dấu tuỳ chỉnh cho 100 điểm xung quanh Sydney.
• Triển khai tính năng phân cụm điểm đánh dấu.
• Cho phép người dùng tương tác để căn giữa lại và vẽ một hình tròn trên bản đồ khi một điểm đánh dấu được nhấn.

Điều kiện tiên quyết

• Kiến thức cơ bản về Swift và phát triển iOS.

Bạn sẽ thực hiện

• Tải Maps SDK cho iOS và Thư viện tiện ích Google Maps SDK cho iOS.
• Tải bản đồ.
• Sử dụng điểm đánh dấu, điểm đánh dấu tuỳ chỉnh và tính năng phân cụm điểm đánh dấu.
• Làm việc với hệ thống sự kiện Maps SDK cho iOS để hỗ trợ hoạt động tương tác của người dùng.
• Điều khiển camera trên bản đồ theo phương thức lập trình.
• Vẽ trên bản đồ.

Bạn cần có

Để hoàn tất lớp học lập trình này, bạn cần có các tài khoản, dịch vụ và công cụ sau:

• Xcode 12.0 trở lên với SDK mục tiêu là 12.0 trở lên.
• Đã cài đặt Cocoapods.
• Một tài khoản Google Cloud Platform đã bật tính năng thanh toán (xem bước tiếp theo).
• Một dự án trong Cloud Console có bật Maps SDK cho iOS (xem bước tiếp theo).

2. Bắt đầu thiết lập

Đối với bước bật bên dưới, bạn cần bật Maps SDK dành cho iOS.

Thiết lập Nền tảng Google Maps

Nếu bạn chưa có tài khoản Google Cloud Platform và dự án có bật tính năng thanh toán, vui lòng xem hướng dẫn Bắt đầu sử dụng Google Maps Platform để tạo tài khoản thanh toán và dự án.

1. Trong Cloud Console, hãy nhấp vào trình đơn thả xuống dự án rồi chọn dự án mà bạn muốn sử dụng cho lớp học lập trình này.

2. Bật các API và SDK của Google Maps Platform cần thiết cho lớp học lập trình này trong Google Cloud Marketplace. Để làm như vậy, hãy làm theo các bước trong video này hoặc tài liệu này.
3. Tạo khoá API trong trang Thông tin xác thực của Cloud Console. Bạn có thể làm theo các bước trong video này hoặc tài liệu này. Tất cả các yêu cầu gửi đến Nền tảng Google Maps đều cần có khoá API.

Bắt đầu nhanh

Để giúp bạn bắt đầu nhanh nhất có thể, sau đây là một số mã khởi đầu giúp bạn theo dõi lớp học lập trình này.

1. Sao chép kho lưu trữ nếu bạn đã cài đặt git.

git clone https://github.com/googlemaps/codelab-maps-platform-101-swift.git

Hoặc nhấp vào Cho tôi mã để tải mã nguồn xuống.

Cho tôi mã

2. Sau khi tải mã xuống, hãy mở dự án StarterApp trong thư mục /starter. Dự án này bao gồm cấu trúc tệp cơ bản mà bạn cần để hoàn tất lớp học lập trình. Mọi thứ bạn cần để làm việc đều nằm trong thư mục /starter/StarterApp.

Để xem đoạn mã giải pháp đầy đủ đang chạy, hãy xem đoạn mã hoàn chỉnh trong thư mục /solution/SolutionApp.

3. Cài đặt Maps SDK cho iOS

Bước đầu tiên để sử dụng Maps SDK cho iOS là cài đặt các phần phụ thuộc cần thiết. Quy trình này có 2 bước: cài đặt Maps SDK cho iOS và Thư viện tiện ích Maps SDK cho iOS từ trình quản lý phần phụ thuộc Cocoapods, đồng thời cung cấp khoá API cho SDK.

1. Thêm Maps SDK cho iOS và Maps SDK cho Thư viện tiện ích iOS vào Podfile.

Lớp học lập trình này sử dụng cả Maps SDK cho iOS (cung cấp tất cả chức năng cốt lõi của Google Maps) và Maps iOS Utility Library (cung cấp nhiều tiện ích để làm phong phú bản đồ của bạn, bao gồm cả tính năng phân cụm điểm đánh dấu).

Để bắt đầu, trong Xcode (hoặc trình chỉnh sửa văn bản mà bạn muốn), hãy mở Podfile rồi cập nhật tệp này để thêm các phần phụ thuộc của Maps SDK cho iOS và Thư viện tiện ích trong phần nhận xét # Pods for StarterApp:

pod 'GoogleMaps', '6.1.0'
pod 'Google-Maps-iOS-Utils', '3.4.0'

Hãy tham khảo tài liệu Phiên bản của Maps SDK cho iOS để biết phiên bản mới nhất của SDK và hướng dẫn về việc duy trì.

Podfile của bạn sẽ có dạng như sau:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '12.0'

target 'StarterApp' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for StarterApp
  pod 'GoogleMaps', '6.1.0'
  pod 'Google-Maps-iOS-Utils', '3.4.0'
end

2. Cài đặt các pod Maps SDK cho iOS và Maps SDK cho iOS Utility Library.

Để cài đặt các phần phụ thuộc, hãy chạy pod install trong thư mục /starter qua dòng lệnh. Cocoapods tự động tải các phần phụ thuộc xuống và tạo StarterApp.xcworkspace.

3. Sau khi bạn cài đặt các phần phụ thuộc, hãy chạy open StarterApp.xcworkspace từ thư mục /starter để mở tệp trong Xcode, sau đó chạy ứng dụng trong trình mô phỏng iPhone bằng cách nhấn Command+R. Nếu bạn thiết lập đúng mọi thứ, trình mô phỏng sẽ khởi chạy và cho thấy một màn hình đen. Đừng lo lắng, bạn chưa tạo bất cứ thứ gì nên việc này là bình thường!
4. Nhập SDK trong AppDelegate.swift.

Sau khi cài đặt các phần phụ thuộc, bạn cần cung cấp khoá API cho SDK. Bước đầu tiên là nhập Maps SDK cho iOS dưới dạng một phần phụ thuộc bằng cách đặt nội dung sau đây bên dưới câu lệnh nhập import UIKit:

import GoogleMaps

5. Truyền khoá API của bạn đến SDK iOS bằng cách gọi provideAPIKey trên GMSServices trong application: didFinishLaunchingWithOptions:

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

Tệp AppDelegate.swift mới cập nhật của bạn giờ đây sẽ có dạng như sau:

import UIKit
import GoogleMaps

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

}

Thay thế YOUR_API_KEY bằng khoá API mà bạn đã tạo trong Cloud Console.

Sau khi cài đặt các phần phụ thuộc và cung cấp khoá API, bạn đã sẵn sàng bắt đầu gọi Maps SDK cho iOS.

4. Hiển thị bản đồ

Đã đến lúc hiển thị bản đồ đầu tiên của bạn!

Phần thường dùng nhất của Maps SDK cho iOS là lớp GMSMapView. Lớp này cung cấp nhiều phương thức cho phép bạn tạo và thao tác với các thực thể bản đồ. Bạn có thể thực hiện như sau:

1. Mở ViewController.swift.

Đây là nơi bạn sẽ thực hiện phần còn lại của lớp học lập trình này. Bạn đã có sẵn các sự kiện trong vòng đời loadView và viewDidLoad cho trình điều khiển khung hiển thị.

2. Nhập Maps SDK cho iOS bằng cách thêm nội dung này vào đầu tệp:

import GoogleMaps

3. Khai báo một biến thực thể ViewController để lưu trữ GMSMapView.

Phiên bản của GMSMapView là đối tượng chính mà bạn sẽ làm việc trong suốt lớp học lập trình này, đồng thời bạn sẽ tham chiếu và hành động trên đối tượng này từ nhiều phương thức vòng đời của trình điều khiển khung hiển thị. Để cung cấp dữ liệu này, hãy cập nhật cách triển khai ViewController để khai báo một biến thực thể nhằm lưu trữ dữ liệu:

class ViewController: UIViewController {

  private var mapView: GMSMapView!

  ...
}

4. Trong loadView, hãy tạo một thực thể của GMSCameraPosition.

GMSCameraPosition xác định vị trí trung tâm của bản đồ và mức thu phóng được hiển thị. Đoạn mã này gọi phương thức cameraWithLatitude:longitude:zoom: để đặt bản đồ ở giữa Sydney, Úc, ở vĩ độ -33,86 và kinh độ 151,20, với mức thu phóng là 12:

let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 12)

5. Trong loadView, hãy tạo một thực thể của GMSMapView để khởi tạo bản đồ.

Để tạo một phiên bản bản đồ mới, hãy gọi GMSMapView(frame: CGRect, camera: GMSCameraPosition). Lưu ý cách khung được đặt thành CGRect.zero. Đây là một biến toàn cục trong thư viện CGGeometry của iOS, chỉ định một khung có chiều rộng bằng 0, chiều cao bằng 0, nằm ở vị trí (0,0) bên trong trình xem. Máy ảnh được đặt ở vị trí máy ảnh mà bạn vừa tạo.

Tiếp theo, để hiển thị bản đồ, hãy đặt khung hiển thị gốc của trình điều khiển khung hiển thị thành mapView. Thao tác này sẽ giúp bản đồ hiển thị ở chế độ toàn màn hình.

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView

6. Đặt GMSMapViewDelegate thành bộ điều khiển chế độ xem.

Khi được triển khai, uỷ quyền chế độ xem bản đồ cho phép bạn xử lý các sự kiện từ lượt tương tác của người dùng trên thực thể GMSMapView mà bạn sẽ cần sau này.

Trước tiên, hãy cập nhật giao diện của ViewController để tuân thủ giao thức cho GMSMapViewDelegate:

class ViewController: UIViewController, GMSMapViewDelegate

Tiếp theo, hãy thêm dòng sau vào hàm loadView để đặt GMSMapViewDelegate thành ViewController.

    mapView.delegate = self

Bây giờ, hãy tải lại ứng dụng trong trình mô phỏng iOS (Command+R) và bản đồ sẽ xuất hiện như trong ảnh chụp màn hình sau:

Hình 1. Ứng dụng iOS cho thấy một Google Map.

Tóm lại, trong bước này, bạn đã tạo một thực thể của GMSMapView để hiển thị một bản đồ tập trung vào thành phố Sydney, Úc.

Bây giờ, tệp ViewController.swift của bạn sẽ có dạng như sau:

import UIKit
import GoogleMaps

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
  }

}

5. Tạo kiểu cho bản đồ (không bắt buộc)

Bạn có thể tuỳ chỉnh kiểu bản đồ bằng tính năng Định kiểu bản đồ dựa trên đám mây.

Tạo mã bản đồ

Nếu bạn chưa tạo mã bản đồ có kiểu bản đồ được liên kết, hãy xem hướng dẫn về Mã bản đồ để hoàn tất các bước sau:

1. Tạo mã bản đồ.
2. Liên kết mã bản đồ với kiểu bản đồ.

Lưu ý: Việc sử dụng một Mã bản đồ trên Maps SDK dành cho Android hoặc Maps SDK dành cho iOS sẽ kích hoạt một lượt tải bản đồ được tính phí theo SKU Bản đồ động. Hãy xem phần Thanh toán cho Google Maps để biết thêm thông tin.

Thêm mã bản đồ vào ứng dụng

Để sử dụng mã bản đồ mà bạn đã tạo ở bước trước, hãy mở tệp ViewController.swift và trong phương thức loadView, hãy tạo một đối tượng GMSMapID rồi cung cấp mã bản đồ cho đối tượng đó. Tiếp theo, hãy sửa đổi quá trình khởi tạo GMSMapView bằng cách cung cấp đối tượng GMSMapID làm tham số.

ViewController.swift

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)
    let mapID = GMSMapID(identifier: "YOUR_MAP_ID")

    mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

Sau khi hoàn tất, hãy chạy ứng dụng để xem bản đồ theo kiểu mà bạn đã chọn.

6. Thêm điểm đánh dấu vào bản đồ

Có rất nhiều việc mà nhà phát triển có thể làm với Maps SDK cho iOS, nhưng đặt điểm đánh dấu trên bản đồ chắc chắn là việc phổ biến nhất. Các điểm đánh dấu cho biết những điểm cụ thể trên bản đồ và là một phần tử phổ biến trên giao diện người dùng để xử lý hoạt động tương tác của người dùng. Nếu đã từng sử dụng Google Maps, thì có lẽ bạn đã quen thuộc với điểm đánh dấu mặc định, trông giống như các ghim màu đỏ trong Hình 2:

Hình 2. Bản đồ có điểm đánh dấu màu đỏ.

Bước này minh hoạ cách sử dụng lớp GMSMarker để đặt điểm đánh dấu trên bản đồ.

Xin lưu ý rằng bạn không thể đặt điểm đánh dấu trên bản đồ cho đến khi bản đồ được tải từ bước trước đó trong sự kiện vòng đời loadView của trình điều khiển chế độ xem. Vì vậy, hãy hoàn tất các bước này trong sự kiện vòng đời viewDidLoad. Sự kiện này được gọi sau khi chế độ xem (và bản đồ) được tải.

1. Xác định một đối tượng CLLocationCoordinate2D.

CLLocationCoordinate2D là một cấu trúc do thư viện CoreLocation của iOS cung cấp, xác định một vị trí địa lý ở một vĩ độ và kinh độ nhất định. Để bắt đầu tạo điểm đánh dấu đầu tiên, hãy xác định một đối tượng CLLocationCoordinate2D và đặt vĩ độ cũng như kinh độ ở tâm bản đồ. Bạn có thể truy cập vào toạ độ của tâm bản đồ từ chế độ xem bản đồ bằng cách sử dụng các thuộc tính camera.target.latitude và camera.target.longitude.

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)

2. Tạo một thực thể của GMSMarker.

Maps SDK dành cho iOS cung cấp lớp GMSMarker. Mỗi thực thể của GMSMarker đại diện cho một điểm đánh dấu riêng lẻ trên bản đồ và được tạo bằng cách gọi markerWithPosition: và truyền cho thực thể đó một đối tượng CLLocationCoordinate2D để cho SDK biết vị trí đặt điểm đánh dấu trên bản đồ.

    let marker = GMSMarker(position: mapCenter)

3. Đặt biểu tượng điểm đánh dấu tuỳ chỉnh.

Điểm đánh dấu ghim màu đỏ mặc định của Google Maps rất hữu ích, nhưng việc tuỳ chỉnh bản đồ cũng vậy! May mắn thay, bạn có thể dễ dàng sử dụng điểm đánh dấu tuỳ chỉnh bằng Maps SDK cho iOS. Xin lưu ý rằng dự án StarterApp có chứa một hình ảnh có tên là "custom_pin.png" để bạn sử dụng, nhưng bạn có thể sử dụng bất kỳ hình ảnh nào bạn muốn.

Để đặt điểm đánh dấu tuỳ chỉnh, hãy đặt thuộc tính icon của điểm đánh dấu thành một thực thể của UIImage.

    marker.icon = UIImage(named: "custom_pin.png")

4. Kết xuất điểm đánh dấu vào bản đồ.

Điểm đánh dấu của bạn đã được tạo nhưng chưa xuất hiện trên bản đồ. Để thực hiện việc này, hãy đặt thuộc tính map của thực thể GMSMarker thành một thực thể của GMSMapView.

    marker.map = mapView

Giờ đây, hãy tải lại ứng dụng và xem bản đồ đầu tiên của bạn có một điểm đánh dấu như trong Hình 3!

Hình 3. Ứng dụng iOS có Google Maps với một điểm đánh dấu màu đỏ ở giữa.

Tóm lại, trong phần này, bạn đã tạo một thực thể của lớp GMSMarker và áp dụng thực thể đó vào khung hiển thị bản đồ để hiển thị một điểm đánh dấu trên bản đồ. Sự kiện vòng đời viewDidLoad được cập nhật trong ViewController.swift hiện sẽ có dạng như sau:

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView
  }

7. Bật tính năng Nhóm điểm đánh dấu

Nếu sử dụng nhiều điểm đánh dấu hoặc có các điểm đánh dấu ở gần nhau, bạn có thể gặp phải vấn đề là các điểm đánh dấu chồng lên nhau hoặc xuất hiện quá gần nhau, gây ra trải nghiệm không tốt cho người dùng. Ví dụ: nếu 2 điểm đánh dấu ở rất gần nhau, bạn có thể gặp phải trường hợp như trong Hình 4:

Hình 4. Hai điểm đánh dấu ở rất gần nhau.

Đây là lúc bạn cần đến tính năng nhóm điểm đánh dấu. Nhóm điểm đánh dấu là một tính năng phổ biến khác được triển khai, giúp nhóm các điểm đánh dấu lân cận thành một biểu tượng duy nhất thay đổi tuỳ theo mức thu phóng, như minh hoạ trong Hình 5:

Hình 5. Ví dụ về các điểm đánh dấu được nhóm thành một biểu tượng duy nhất.

Thuật toán phân cụm điểm đánh dấu chia khu vực hiển thị của bản đồ thành một lưới, sau đó phân cụm các biểu tượng nằm trong cùng một ô. Nhóm Google Maps Platform đã tạo một thư viện tiện ích mã nguồn mở hữu ích có tên là Thư viện tiện ích Google Maps SDK cho iOS. Thư viện này tự động xử lý việc phân cụm điểm đánh dấu cho bạn, cùng với nhiều việc khác. Đọc thêm về tính năng nhóm điểm đánh dấu trong tài liệu của Nền tảng Google Maps hoặc xem nguồn của Thư viện tiện ích iOS trên GitHub.

1. Thêm các điểm đánh dấu khác vào bản đồ.

Để xem tính năng nhóm điểm đánh dấu hoạt động, bạn cần có nhiều điểm đánh dấu trên bản đồ. Để đơn giản hoá việc này, hãy dùng trình tạo điểm đánh dấu có trong dự án khởi đầu trong MarkerGenerator.swift.

Để thêm một số lượng điểm đánh dấu cụ thể vào bản đồ, hãy gọi MarkerGenerator(near:count:).markerArray trong vòng đời viewDidLoad của trình điều khiển chế độ xem bên dưới mã từ bước trước. Phương thức này tạo số lượng điểm đánh dấu được chỉ định trong count tại các vị trí ngẫu nhiên xung quanh toạ độ được chỉ định trong một đối tượng CLLocationCoordinate2D. Trong trường hợp này, bạn có thể truyền biến mapCenter mà bạn đã tạo trước đó. Các điểm đánh dấu được trả về trong [GMSMarker].

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray

Bạn có thể kiểm thử xem có bao nhiêu điểm đánh dấu bằng cách thêm các dòng này sau định nghĩa của markerArray, rồi chạy ứng dụng. Nhớ nhận xét các dòng này trước khi chuyển sang các bước tiếp theo, trong đó sử dụng Marker Clusterer để quản lý việc hiển thị các điểm đánh dấu:

    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    for marker in markerArray {
      marker.map = mapView
    }

2. Nhập Thư viện tiện ích Google Maps SDK cho iOS.

Để thêm thư viện tiện ích Maps iOS làm phần phụ thuộc vào dự án, hãy thêm phần này vào danh sách phần phụ thuộc ở đầu ViewController.swift:

import GoogleMapsUtils

3. Định cấu hình trình phân cụm điểm đánh dấu.

Để sử dụng trình nhóm điểm đánh dấu, bạn cần cung cấp 3 thành phần để định cấu hình cách hoạt động của trình nhóm điểm đánh dấu: một thuật toán phân cụm, một trình tạo biểu tượng và một trình kết xuất. Thuật toán này xác định hành vi của cách các điểm đánh dấu được nhóm lại, chẳng hạn như khoảng cách giữa các điểm đánh dấu để đưa vào cùng một cụm. Trình tạo biểu tượng cung cấp các biểu tượng cụm sẽ được dùng ở nhiều mức thu phóng. Trình kết xuất xử lý hoạt động kết xuất thực tế của các biểu tượng cụm trên bản đồ.

Bạn có thể tự viết tất cả những nội dung này nếu muốn. Ngoài ra, thư viện tiện ích Maps iOS cung cấp các phương thức triển khai mặc định để giúp quá trình này diễn ra nhanh hơn. Thêm các dòng sau:

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)

4. Tạo một thực thể của GMUClusterManager.

GMUClusterManager là lớp triển khai tính năng nhóm điểm đánh dấu bằng thuật toán, trình tạo biểu tượng và trình kết xuất do bạn chỉ định. Để tạo trình kết xuất và cung cấp trình kết xuất cho khung hiển thị bản đồ, trước tiên, hãy thêm một biến thực thể vào quá trình triển khai ViewController để lưu trữ thực thể trình quản lý cụm:

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
}

Tiếp theo, hãy tạo thực thể của GMUClusterManager trong sự kiện vòng đời viewDidLoad:

    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

5. Thêm các điểm đánh dấu và chạy trình phân cụm điểm đánh dấu.

Giờ đây, khi phiên bản nhóm điểm đánh dấu của bạn đã được định cấu hình, hãy truyền cho trình quản lý cụm mảng điểm đánh dấu cần được nhóm bằng cách gọi add(items:), sau đó chạy trình nhóm bằng cách gọi cluster.

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()

Tải lại ứng dụng và giờ đây, bạn sẽ thấy rất nhiều điểm đánh dấu được nhóm lại với nhau một cách gọn gàng như ví dụ trong Hình 6. Hãy thử các mức thu phóng khác nhau bằng cách chụm và phóng to trên bản đồ để xem các cụm điểm đánh dấu thích ứng khi bạn phóng to/thu nhỏ.

Hình 6. Ứng dụng iOS có Google Maps và các điểm đánh dấu được nhóm thành cụm.

Tóm lại, trong bước này, bạn đã định cấu hình một phiên bản của trình phân cụm điểm đánh dấu từ Thư viện tiện ích Google Maps SDK cho iOS, sau đó dùng phiên bản này để phân cụm 100 điểm đánh dấu trên bản đồ. Sự kiện vòng đời viewDidLoad trong ViewController.swift hiện sẽ có dạng như sau:

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray
    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    //    for marker in markerArray {
    //      marker.map = mapView
    //    }

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)
    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()
  }

8. Thêm hoạt động tương tác của người dùng

Giờ đây, bạn đã có một bản đồ trông rất đẹp, hiển thị các điểm đánh dấu và sử dụng tính năng nhóm điểm đánh dấu. Trong bước này, bạn sẽ thêm một số thao tác xử lý bổ sung đối với các hoạt động tương tác của người dùng bằng cách sử dụng GMSMapViewDelegate (bạn đã đặt thành bộ điều khiển khung hiển thị trước đó) để cải thiện trải nghiệm người dùng trên bản đồ.

Maps SDK cho iOS cung cấp một hệ thống sự kiện toàn diện được triển khai thông qua uỷ quyền khung hiển thị bản đồ, bao gồm cả trình xử lý sự kiện cho phép bạn thực thi mã khi nhiều hoạt động tương tác của người dùng xảy ra. Ví dụ: uỷ quyền MapView bao gồm các phương thức cho phép bạn kích hoạt quá trình thực thi mã cho các hoạt động tương tác, chẳng hạn như người dùng nhấp vào bản đồ và điểm đánh dấu, kéo khung hiển thị của bản đồ, thu phóng và thu nhỏ, v.v.

Trong bước này, bạn sẽ lập trình để di chuyển bản đồ sao cho tâm của bản đồ nằm ở vị trí của bất kỳ điểm đánh dấu nào mà người dùng nhấn vào.

1. Triển khai trình nghe lượt nhấn vào điểm đánh dấu.

mapView(_:didTap:) được gọi bất cứ khi nào người dùng nhấn vào một trong các điểm đánh dấu mà bạn đã tạo trước đó và bất cứ khi nào người dùng nhấn vào một nhóm điểm đánh dấu (về bản chất, các nhóm điểm đánh dấu được triển khai dưới dạng một thực thể của GMSMarker).

Để triển khai trình nghe sự kiện, hãy bắt đầu bằng cách tạo một chương trình giả ở cuối ViewController.swift trước dấu ngoặc nhọn đóng.

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    return false
  }

Lưu ý rằng phương thức này đang trả về false. Thao tác này sẽ yêu cầu iOS SDK tiếp tục thực thi hành vi GMSMarker mặc định, chẳng hạn như hiện cửa sổ thông tin (nếu được định cấu hình) sau khi thực thi mã trình xử lý sự kiện.

2. Xử lý sự kiện nhấn và tạo ảnh động cho camera để căn giữa lại bản đồ khi người dùng nhấn vào một điểm đánh dấu hoặc cụm điểm đánh dấu.

Khi được gọi, mapView(_:didTap:) sẽ truyền thực thể của GMSMarker đã được nhấn để bạn có thể xử lý thực thể đó trong mã của mình. Bạn có thể dùng thực thể này để đặt lại tâm bản đồ bằng cách gọi animate(toLocation:) trên chế độ xem bản đồ từ bên trong trình xử lý sự kiện và truyền cho chế độ xem này vị trí của thực thể điểm đánh dấu từ thuộc tính position.

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

3. Phóng to một nhóm điểm đánh dấu khi nhóm đó được nhấn.

Một mẫu hình phổ biến về trải nghiệm người dùng là phóng to các cụm điểm đánh dấu khi người dùng nhấn vào. Điều này cho phép người dùng xem các điểm đánh dấu được phân cụm, vì cụm sẽ mở rộng ở mức thu phóng thấp hơn.

Như đã lưu ý trước đó, biểu tượng cụm điểm đánh dấu thực sự là một cách triển khai GMSMarker bằng biểu tượng tuỳ chỉnh. Vậy làm sao bạn có thể biết người dùng đã nhấn vào một điểm đánh dấu hay một cụm điểm đánh dấu? Khi trình quản lý nhóm điểm đánh dấu tạo một biểu tượng nhóm mới, trình quản lý này sẽ triển khai phiên bản GMSMarker để tuân thủ một giao thức có tên là GMUCluster. Bạn có thể dùng một điều kiện để kiểm tra xem điểm đánh dấu được truyền vào trình xử lý sự kiện có tuân thủ giao thức này hay không.

Sau khi biết theo phương thức lập trình rằng một cụm đã được nhấn, bạn có thể gọi animate(toZoom:) trên thực thể chế độ xem bản đồ và đặt mức thu phóng thành mức thu phóng hiện tại cộng thêm một. Mức thu phóng hiện tại có trên thực thể mapView trong thuộc tính camera.zoom.

Ngoài ra, hãy lưu ý cách đoạn mã sau trả về true. Điều này cho trình xử lý sự kiện biết rằng bạn đã hoàn tất việc xử lý sự kiện và không thực thi thêm mã nào trong trình xử lý. Một trong những lý do để làm việc này là ngăn đối tượng GMSMarker cơ bản thực thi phần còn lại của hành vi mặc định, chẳng hạn như hiện cửa sổ thông tin. Điều này sẽ không có nhiều ý nghĩa trong trường hợp nhấn vào biểu tượng cụm.

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

Bây giờ, hãy tải lại ứng dụng rồi nhấn vào một số điểm đánh dấu và cụm điểm đánh dấu. Khi bạn nhấn vào một trong hai, bản đồ sẽ căn giữa lại vào phần tử bạn nhấn. Khi bạn nhấn vào một cụm điểm đánh dấu, bản đồ cũng sẽ phóng to thêm một cấp và cụm điểm đánh dấu sẽ mở rộng để cho thấy các điểm đánh dấu được nhóm bên dưới.

Tóm lại, trong bước này, bạn đã triển khai trình nghe thao tác nhấn vào điểm đánh dấu và xử lý sự kiện để căn giữa lại trên phần tử được nhấn và phóng to nếu phần tử đó là biểu tượng nhóm điểm đánh dấu.

Phương thức mapView(_:didTap:) của bạn sẽ có dạng như sau:

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    return false
  }

9. Vẽ trên bản đồ

Cho đến nay, bạn đã tạo một bản đồ Sydney có các điểm đánh dấu tại 100 điểm ngẫu nhiên và xử lý hoạt động tương tác của người dùng. Trong bước cuối cùng của lớp học lập trình này, bạn sẽ sử dụng các tính năng vẽ của Maps SDK cho iOS để thêm một tính năng hữu ích khác vào trải nghiệm bản đồ của mình.

Hãy tưởng tượng rằng bản đồ này sẽ được những người dùng muốn khám phá thành phố Sydney sử dụng. Một tính năng hữu ích là hình dung bán kính xung quanh một điểm đánh dấu khi người dùng nhấp vào điểm đó. Điều này sẽ giúp người dùng nhanh chóng biết được những địa điểm khác nằm trong phạm vi gần với điểm đánh dấu mà họ đã nhấp vào.

SDK iOS bao gồm một bộ hàm để vẽ các hình dạng trên bản đồ, chẳng hạn như hình vuông, đa giác, đường kẻ và hình tròn. Trong bước này, hãy kết xuất một vòng tròn để hiển thị bán kính 800 mét (khoảng nửa dặm) xung quanh một điểm đánh dấu khi người dùng nhấp vào điểm đánh dấu đó.

1. Thêm một biến thực thể circle vào quá trình triển khai ViewController.

Biến thực thể này được dùng để lưu vòng tròn được vẽ gần đây nhất, để có thể huỷ vòng tròn đó trước khi vẽ một vòng tròn khác. Sau cùng, việc này sẽ không giúp ích nhiều cho người dùng và trông không đẹp mắt nếu mọi điểm đánh dấu được nhấn đều có một vòng tròn vẽ xung quanh!

Để làm việc này, hãy cập nhật cách triển khai ViewController như sau:

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
  private var circle: GMSCircle? = nil
  ...
}

2. Vẽ vòng tròn khi người dùng nhấn vào một điểm đánh dấu.

Ở cuối phương thức mapView(_:didTap:), ngay phía trên câu lệnh return false, hãy thêm mã xuất hiện ở đây để tạo một phiên bản của lớp GMSCircle trong iOS SDK nhằm vẽ một hình tròn có bán kính 800 mét mới bằng cách gọi GMSCircle(position:radius:) và truyền cho lớp này vị trí của điểm đánh dấu được nhấn như bạn đã làm khi căn giữa lại bản đồ.

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)

3. Tạo kiểu cho vòng tròn.

Theo mặc định, GMSCircle vẽ một vòng tròn có nét vẽ màu đen và màu tô trong suốt. Cách này có hiệu quả khi hiển thị bán kính, nhưng trông không đẹp lắm và hơi khó nhìn. Tiếp theo, hãy tô màu cho vòng tròn để cải thiện kiểu dáng bằng cách chỉ định một UIColor cho thuộc tính fillColor của vòng tròn. Đoạn mã xuất hiện ở đây sẽ thêm một màu xám có độ trong suốt 50%:

    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)

4. Kết xuất hình tròn trên bản đồ.

Giống như khi bạn tạo điểm đánh dấu trước đó, việc tạo một thực thể của GMSCircle sẽ không làm cho thực thể đó xuất hiện trên bản đồ. Để thực hiện việc này, hãy chỉ định thực thể khung hiển thị bản đồ cho thuộc tính map của hình tròn.

    circle?.map = mapView

5. Xoá mọi vòng tròn đã kết xuất trước đó.

Như đã đề cập trước đó, việc tiếp tục thêm các vòng tròn vào bản đồ sẽ không mang lại trải nghiệm người dùng tốt. Để xoá vòng tròn do một sự kiện nhấn trước đó kết xuất, hãy đặt thuộc tính map của circle thành nil ở đầu mapView(_:didTap:).

    // Clear previous circles
    circle?.map = nil

Tải lại ứng dụng rồi nhấn vào một điểm đánh dấu. Bạn sẽ thấy một hình tròn mới được vẽ bất cứ khi nào một điểm đánh dấu được nhấn và mọi hình tròn đã hiển thị trước đó sẽ bị xoá như trong Hình 7.

Hình 7. Một vòng tròn được vẽ xung quanh điểm đánh dấu mà bạn đã nhấn.

Tóm lại, trong bước này, bạn đã sử dụng lớp GMSCircle để kết xuất một hình tròn bất cứ khi nào một điểm đánh dấu được nhấn.

Phương thức mapView(_:didTap:) sẽ có dạng như sau:

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Clear previous circles
    circle?.map = nil

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)
    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)
    circle?.map = mapView
    return false
  }

10. Xin chúc mừng

Bạn đã tạo thành công một ứng dụng iOS có bản đồ tương tác của Google.

Kiến thức bạn học được

• Tải và định cấu hình SDK Maps dành cho iOS và Thư viện tiện ích SDK Google Maps dành cho iOS
• Tải bản đồ
• Tạo kiểu cho bản đồ
• Sử dụng điểm đánh dấu, điểm đánh dấu tuỳ chỉnh và cụm điểm đánh dấu
• Hệ thống sự kiện để cung cấp hoạt động tương tác của người dùng
• Điều khiển camera trên bản đồ theo phương thức lập trình
• Vẽ trên bản đồ

Tiếp theo là gì?

• Khám phá hoặc phân nhánh kho lưu trữ maps-sdk-for-ios-samples GitHub gồm các mẫu và bản minh hoạ để có thêm ý tưởng
• Tìm hiểu qua các lớp học lập trình khác về Swift để tạo ứng dụng iOS bằng Nền tảng Google Maps
• Hãy giúp chúng tôi tạo ra nội dung hữu ích nhất cho bạn bằng cách trả lời khảo sát sau:

Bạn muốn xem những lớp học lập trình nào khác?

Trực quan hoá dữ liệu trên bản đồ Tìm hiểu thêm về cách tuỳ chỉnh kiểu bản đồ Tạo các tương tác 3D trên bản đồ

Bạn không tìm thấy lớp học lập trình mà mình quan tâm nhất? Yêu cầu cấp lại bằng cách báo lỗi mới tại đây.