Thêm bản đồ vào ứng dụng iOS của bạn (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 để xây dựng các ứng dụng iOS trong Swift. Bạn sẽ tạo một ứng dụng iOS có chức năng sau:

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

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

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

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

• Tải SDK Maps dành cho iOS và SDK Google Maps dành cho Thư viện tiện ích iOS.
• Đang tải bản đồ.
• Sử dụng các điểm đánh dấu, điểm đánh dấu tùy chỉnh và nhóm điểm đánh dấu.
• Làm việc với hệ thống sự kiện SDK Maps dành cho iOS để cung cấp cho người dùng sự tương tác.
• Điều khiển máy ảnh bản đồ theo cách có lập trình.
• Đang vẽ trên bản đồ.

Bạn cần có

Để hoàn thành 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 từ 12.0 trở lên.
• Đã lắp đặt Cocoapods.
• 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 đã bật SDK Maps dành cho iOS (xem bước tiếp theo).

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

Để bật bước bên dưới, bạn cần bật SDK Maps 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à một dự án đã 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à một dự án.

1. Trong Cloud Console, hãy nhấp vào trình đơn thả xuống dự án và 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 API và SDK của Nền tảng Google Maps bắt buộc 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 Google Maps Platform đều yêu cầu khóa API.

Bắt đầu nhanh

Để bắt đầu nhanh nhất có thể, hãy tham khảo khóa học lập trình này để tham khảo một số mã dành cho người mới bắt đầu.

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 Cung cấp cho tôi mã để tải mã nguồn xuống.

Cho tôi mã xác minh

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 công việc bạn cần làm đều nằm trong thư mục /starter/StarterApp.

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

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

Bước đầu tiên để sử dụng SDK Maps dành cho iOS là cài đặt các phần phụ thuộc cần thiết. Quá trình này có hai bước: cài đặt SDK Maps dành cho iOS và SDK Maps dành cho iOS iOS từ trình quản lý phần phụ thuộc Cocoapods và cung cấp khóa API của bạn cho SDK.

1. Thêm SDK Maps dành cho iOS và SDK Bản đồ dành 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ả SDK Maps dành cho iOS, cung cấp mọi chức năng cốt lõi của Google Maps và Thư viện tiện ích iOS của Maps. Ứng dụng này cung cấp nhiều tiện ích để làm phong phú bản đồ của bạn, bao gồm cả phân nhóm điểm đánh dấu.

Để bắt đầu, trong Xcode (hoặc trình chỉnh sửa văn bản ưa thích của bạn), hãy mở Podfile và cập nhật tệp để đưa vào SDK Maps cho các phần phụ thuộc 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 xem tài liệu SDK phiên bản SDK cho iOS để biết phiên bản mới nhất của SDK và hướng dẫn bảo 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 SDK Maps cho iOS và SDK Maps cho các nhóm Thư viện tiện ích iOS.

Để cài đặt các phần phụ thuộc, hãy chạy pod install trong thư mục /starter của 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 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 vào Command+R. Nếu mọi thứ đã được thiết lập đúng cách, trình mô phỏng sẽ khởi chạy và hiển thị màn hình đen. Đừng lo lắng, bạn chưa xây dựng bất kỳ thứ gì, vì vậy điều này là bình thường!
4. Nhập SDK trong AppDelegate.swift.

Bây giờ, các phần phụ thuộc của bạn đã được cài đặt. Đã đến lúc cung cấp khóa API của bạn cho SDK. Bước đầu tiên là nhập SDK Maps cho iOS làm phần phụ thuộc bằng cách đặt phần sau vào câu lệnh nhập import UIKit:

import GoogleMaps

5. Chuyển khóa API đế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à bạn cập nhật 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 khóa API mà bạn đã tạo trong Cloud Console.

Bây giờ, các phần phụ thuộc của bạn đã được cài đặt và khóa API của bạn được cung cấp. Bạn có thể bắt đầu thực hiện lệnh gọi đến SDK Maps dành 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 được sử dụng phổ biến nhất hoặc SDK Maps dành 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 đồ. Đây là cách thực hiện.

1. Mở ViewController.swift.

Đây là nơi bạn sẽ thực hiện phần còn lại của công việc cho lớp học lập trình này. Xin lưu ý rằng các sự kiện trong vòng đời loadView và viewDidLoad cho bộ điều khiển chế độ xem đã bị xóa cho bạn.

2. Nhập SDK Maps dành cho iOS bằng cách thêm SDK 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.

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

class ViewController: UIViewController {

  private var mapView: GMSMapView!

  ...
}

4. Trong loadView, hãy tạo một bản sao của GMSCameraPosition.

GMSCameraPosition xác định vị trí bản đồ được căn giữa và mức thu phóng hiển thị. Mã này gọi phương thức cameraWithLatitude:longitude:zoom: để căn giữa bản đồ ở Sydney, Úc, ở vĩ độ -33,86 và kinh độ là 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 bản sao của GMSMapView để tạo bản đồ.

Để tạo một thực thể bản đồ mới, hãy gọi GMSMapView(frame: CGRect, camera: GMSCameraPosition). Lưu ý cách khung được đặt thành CGRect.zero, là một biến toàn cục từ thư viện CGGeometry dành cho iOS chỉ định khung có chiều rộng là 0, chiều cao là 0, nằm ở vị trí (0,0) bên trong bộ điều khiển chế độ 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 chế độ xem gốc của bộ điều khiển chế độ xem thành mapView, giúp bản đồ hiển thị toàn màn hình.

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

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

Khi được triển khai, thực thể đại diện của chế độ xem bản đồ cho phép bạn xử lý các sự kiện từ hoạt động tương tác của người dùng trên phiên bản 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 giá trị này 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ư minh họa trong Hình 1!

Hình 1. Ứng dụng iOS hiển thị một Google Maps.

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

Tệp ViewController.swift của bạn hiệ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ể tùy chỉnh kiểu của bản đồ bằng cách tạo 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 đồ với kiểu bản đồ được liên kết, hãy xem hướng dẫn 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ã bản đồ trên SDK Maps dành cho Android hoặc SDK Maps dành cho iOS sẽ kích hoạt lượt tải bản đồ được tính cho SKU động của Maps. Xem bài viết về Thanh toán trên 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 và cung cấp đối tượng đó bằng mã bản đồ. Tiếp theo, hãy sửa đổi tùy chọn tạo GMSMapView bằng cách cung cấp đối tượng GMSMapID làm thông 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
  }

Khi bạn đã hoàn tất việc này, hãy chạy ứng dụng để xem bản đồ của bạn theo phong cách 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à các nhà phát triển làm với SDK Maps dành cho iOS nhưng việc đặt điểm đánh dấu lên bản đồ chắc chắn là phổ biến nhất. Điểm đánh dấu cho biết các điểm cụ thể trên bản đồ và là một phần tử giao diện người dùng phổ biến để xử lý việc tương tác của người dùng. Nếu trước đây bạn đã sử dụng Google Maps thì bạn có thể đã quen thuộc với điểm đánh dấu mặc định, giống như ghim màu đỏ trong Hình 2:

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

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

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

1. Hãy xác định một đối tượng CLLocationCoordinate2D.

CLLocationCoordinate2D là một cấu trúc có sẵn trong thư viện CoreLocation của iOS. Thư viện này xác định một vị trí địa lý ở một vĩ độ và kinh độ đã được đặt. Để 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ĩ độ và kinh độ ở giữa bản đồ. Các tọa độ của tâm bản đồ có thể truy cập được 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.

SDK Maps dành cho iOS cung cấp lớp GMSMarker. Mỗi bản sao 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à chuyển đối tượng đó đến 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 tùy chỉnh.

Điểm đánh dấu ghim màu đỏ mặc định cho Google Maps là rất tốt, nhưng chúng tôi cũng đang tùy chỉnh bản đồ của bạn! Thật may là việc sử dụng điểm đánh dấu tùy chỉnh rất dễ dàng với SDK Maps dành cho iOS. Lưu ý rằng dự án StarterApp bao gồm một hình ảnh có tên ‘custom_pin.png\39; để 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 tùy chỉnh, hãy đặt thuộc tính icon của điểm đánh dấu thành bản sao của UIImage.

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

4. Hiển thị điểm đánh dấu lên bản đồ.

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

    marker.map = mapView

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

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

Tóm lại, trong phần này, bạn đã tạo một bản sao của lớp GMSMarker và áp dụng bản sao đó cho chế độ xem bản đồ để hiển thị điểm đánh dấu trên bản đồ. Sự kiện vòng đời viewDidLoad đã cập nhật của bạn trong ViewController.swift giờ đây 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 phân nhóm điểm đánh dấu

Nếu bạn 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 đề khiến các điểm đánh dấu bị trùng lặp hoặc xuất hiện đông đúc với nhau, gây ra trải nghiệm kém cho người dùng. Ví dụ: nếu hai điểm đánh dấu rất gần nhau, bạn có thể gặp phải tình huống như trong Hình 4:

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

Đây là lúc tính năng phân nhóm điểm đánh dấu xuất hiện. Tạo nhóm các điểm đánh dấu là một tính năng thường được triển khai khác, nhóm các điểm đánh dấu gần đó thành một biểu tượng thay đổi tùy thuộc vào mức thu phóng, như minh họa 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.

Thuật toán phân nhóm điểm đánh dấu chia khu vực hiển thị của bản đồ thành một lưới, sau đó nhó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 nguồn mở hữu ích, được gọi là SDK Google Maps dành cho Thư viện tiện ích iOS, trong số nhiều chức năng khác tự động xử lý việc nhóm điểm đánh dấu cho bạn. Hãy đọc thêm về cách nhóm điểm đánh dấu trong tài liệu về 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 nhiều điểm đánh dấu hơn vào bản đồ.

Để xem việc phân nhóm điểm đánh dấu trong thực tế, bạn phải có nhiều điểm đánh dấu trên bản đồ. Để thực hiện việc này một cách dễ dàng, trình tạo điểm đánh dấu thuận tiện được cung cấp cho bạn trong dự án dành cho người mới bắt đầu trong MarkerGenerator.swift.

Để thêm số lượng điểm đánh dấu được chỉ định vào bản đồ của bạn, hãy gọi MarkerGenerator(near:count:).markerArray trong vòng đời của bộ điều khiển chế độ xem viewDidLoad bên dưới mã từ bước trước đó. Phương thức này tạo ra 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 tọa độ được chỉ định trong đối tượng CLLocationCoordinate2D. Trong trường hợp này, bạn có thể chuyể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 tra giao diện của nhiều điểm đánh dấu này 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ớ ghi chú thích cho những dòng này trước khi chuyển sang các bước tiếp theo, dùng các Công cụ này để 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 SDK Google Maps cho Thư viện tiện ích iOS.

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

import GoogleMapsUtils

3. Định cấu hình bộ phân tích điểm đánh dấu.

Để sử dụng trình phân tách điểm đánh dấu, bạn cần cung cấp ba yếu tố để định cấu hình cách công cụ này: thuật toán phân nhóm, trình tạo biểu tượng và trình kết xuất. Thuật toán sẽ xác định hành vi cách nhóm các điểm đánh dấu, 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ử dụng ở các mức thu phóng khác nhau. Trình kết xuất xử lý quá trình 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ể viết tất cả những thứ này từ đầu nếu muốn, nhưng thư viện tiện ích iOS iOS cung cấp triển khai mặc định để giúp quá trình này dễ dàng hơn. Thêm:

    // 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 việc 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à hiển thị trình đó cho chế độ xem bản đồ, trước tiên, hãy thêm một biến thực thể vào cấu hì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 trong vòng đời viewDidLoad:

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

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

Bây giờ, thực thể trình phân tách điểm đánh dấu của bạn đã được định cấu hình, hãy chuyển trình quản lý cụm thành mảng điểm đánh dấu sẽ được phân nhóm bằng cách gọi add(items:), sau đó chạy trình phân giải bằng cách gọi cluster.

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

Tải lại ứng dụng và bây giờ bạn sẽ thấy nhiều điểm đánh dấu được nhóm chặt chẽ như ví dụ trong Hình 6. Hãy tiếp tục và thử các mức thu phóng khác nhau bằng cách chụm và thu phóng 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 theo cụm.

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

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

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

Trong bước này, bạn sẽ xoay bản đồ để căn giữa bất kỳ điểm đánh dấu nào do người dùng nhấn.

1. Triển khai trình nghe 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 bạn đã tạo trước đó và bất cứ khi nào người dùng nhấn vào một cụm điểm đánh dấu (các cụm điểm đánh dấu nội bộ được triển khai dưới dạng một bản sao của GMSMarker).

Để triển khai trình xử lý sự kiện, hãy bắt đầu bằng cách nhả ra ở cuối ViewController.swift trước dấu ngoặc nhọn đóng.

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

    return false
  }

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

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

Khi được gọi, mapView(_:didTap:) sẽ chuyển bản sao của GMSMarker đã được nhấn để bạn có thể xử lý trong mã của mình. Bạn có thể sử dụng phiên bản này để căn cứ vào 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à chuyển vị trí của bản sao điểm đánh dấu từ thuộc tính position.

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

3. Phóng to trên cụm điểm đánh dấu khi nhấn vào.

Mẫu trải nghiệm người dùng phổ biến là phóng to những cụm điểm đánh dấu khi người dùng nhấn vào chúng. Điều này cho phép người dùng xem các điểm đánh dấu theo cụm, khi cụm đó 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 cùng với biểu tượng tùy chỉnh. Vậy làm cách nào để biết liệu một điểm đánh dấu hoặc một cụm điểm đánh dấu có được nhấn vào hay không? Khi trình quản lý bộ tạo điểm đánh dấu tạo biểu tượng cụm mới, trình quản lý này sẽ triển khai phiên bản của GMSMarker để tuân thủ giao thức có tên là GMUCluster.. Bạn có thể sử dụng điều kiện để kiểm tra xem điểm đánh dấu đã chuyển vào trình xử lý sự kiện có tuân theo giao thức này không.

Sau khi biết bằng cách nhấn 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 ở mức thu phóng hiện tại cộng với một mức. Mức thu phóng hiện tại có sẵn trên thực thể mapView trong tài sản camera.zoom.

Ngoài ra, hãy lưu ý cách mã bên dưới 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 bất kỳ mã nào khác trong trình xử lý. Một trong những lý do để thực hiện 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 thị cửa sổ thông tin. Điều này sẽ không hợp lý khi bạn 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 và nhấn vào một số điểm đánh dấu và cụm điểm đánh dấu. Khi nhấn vào một trong hai tùy chọn, bản đồ sẽ gần đây hơn trên phần tử được nhấn đó. Khi một cụm điểm đánh dấu được nhấn vào, bản đồ cũng sẽ phóng to một cấp, và cụm điểm đánh dấu sẽ mở rộng để hiển thị những điểm đánh dấu được nhóm lại bên dưới.

Tóm lại, trong bước này, bạn đã triển khai trình nghe bằng cách nhấn vào điểm đánh dấu và xử lý sự kiện để căn lại vào phần tử được nhấn rồi phóng to nếu phần tử đó là biểu tượng cụ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 bản đồ Sydney hiển thị các điểm đánh dấu tại 100 điểm ngẫu nhiên và xử lý tương tác của người dùng. Đối với bước cuối cùng của lớp học lập trình này, bạn sử dụng các tính năng vẽ của SDK Maps dành cho iOS để thêm một tính năng hữu ích khác cho trải nghiệm bản đồ của bạn.

Hãy tưởng tượng rằng bản đồ này sẽ được sử dụng bởi những người dùng muốn khám phá thành phố Sydney. Một tính năng hữu ích sẽ là trực quan hóa bán kính xung quanh một điểm đánh dấu khi người dùng nhấp vào. Việc này sẽ cho phép người dùng dễ dàng hiểu những điểm đến khác nằm trong khoảng cách đi bộ dễ dàng của điểm đánh dấu được nhấp vào.

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

1. Thêm biến phiên bản circle vào cấu hình triển khai ViewController.

Biến thực thể này dùng để lưu vòng kết nối được vẽ gần đây nhất, để biến này có thể bị hủy bỏ trước khi vẽ một vòng tròn khác. Sau cùng, nó sẽ không rất hữu ích cho người dùng và sẽ không đẹp nếu mỗi điểm đánh dấu được nhấn có một vòng tròn được vẽ xung quanh!

Để thực hiện việc này, hãy cập nhật việc 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 nhấn vào đ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ã được hiển thị ở đây để tạo một bản sao của lớp iOS GMSCircle iOS để vẽ vòng tròn bán kính 800 mét mới bằng cách gọi GMSCircle(position:radius:) và chuyển vị trí của điểm đánh dấu khi bạn nhấn vào.

    // 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ó đường nét màu đen và màu trong suốt. Nút đó hoạt động để hiển thị bán kính, nhưng giao diện không tốt và khó hiển thị một chút. Tiếp theo, hãy tô màu cho vòng tròn để cải thiện kiểu bằng cách gán UIColor cho thuộc tính fillColor của vòng tròn. Mã hiển thị ở đây sẽ thêm màu xám với độ trong suốt 50%:

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

4. Hiển thị vòng tròn trên bản đồ.

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

    circle?.map = mapView

5. Xóa bất kỳ vòng kết nối nào đã hiển thị trước đó.

Như đã lưu ý trước đó, sẽ không phải là một trải nghiệm tốt cho người dùng để tiếp tục thêm vòng tròn vào bản đồ. Để xóa vòng kết nối được hiển thị bởi một sự kiện nhấn trước đó, 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 và nhấn vào một điểm đánh dấu. Bạn sẽ thấy một vòng tròn mới được vẽ bất cứ khi nào có một điểm đánh dấu được nhấn vào và bất kỳ vòng tròn nào đã kết xuất trước đó sẽ bị xóa như minh họa trong Hình 7.

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

Tóm lại, trong bước này, bạn đã dùng lớp GMSCircle để hiển thị một vòng tròn mỗi khi người dùng nhấn vào một điểm đánh dấu.

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 đã xây dựng thành công một ứng dụng iOS có bản đồ tương tác của Google.

Những điều bạn đã học được

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

Nội dung tiếp theo là gì?

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

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

Hình ảnh dữ liệu trên bản đồ Tìm hiểu thêm về cách tùy chỉnh kiểu bản đồ của tôi Xây dựng hoạt động tương tác 3D trong bản đồ

Lớp học lập trình mà bạn muốn không được liệt kê ở trên? Yêu cầu phát hành vấn đề mới tại đây.