Trang này được dịch bởi Cloud Translation API.

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

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

Bản tóm tắt

Trong lớp học lập trình này, bạn sẽ tìm hiểu mọi thứ mình cần để bắt đầu sử dụng Google Maps Platform để xây dựng ứng dụng iOS theo Objective-C. Bạn sẽ tìm hiểu tất cả các kiến thức cơ bản, từ cách thiết lập đến việc tải SDK Maps cho iOS, hiển thị bản đồ đầu tiên, làm việc với các điểm đánh dấu và phân nhóm điểm đánh dấu, vẽ trên bản đồ và xử lý tương tác của người dùng.

Sản phẩm bạn sẽ tạo ra

Trong lớp học lập trình này, bạn sẽ xây dựng một ứng dụng iOS để làm những việc 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 hoạt động 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 điểm đánh dấu được nhấp vào

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

Bắt đầu sử dụng Nền tảng Google Maps
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 sự kiện đá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 bản đồ theo phương thức lập trình
Vẽ trên bản đồ

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

Bạn cần làm quen với các mục bên dưới để hoàn thành lớp học lập trình này. Nếu bạn đã quen với việc làm việc với Google Maps Platform, hãy bỏ qua để đến lớp học lập trình!

Sản phẩm bắt buộc của Nền tảng Google Maps

Trong lớp học lập trình này, bạn sẽ sử dụng các sản phẩm sau của Google Maps Platform:

SDK Maps dành cho iOS
SDK Google Maps cho Thư viện tiện ích iOS

Bắt đầu sử dụng Nền tảng Google Maps

Nếu bạn chưa từng sử dụng Nền tảng Google Maps, hãy làm theo Hướng dẫn bắt đầu sử dụng Nền tảng Google Maps hoặc xem Danh sách phát Bắt đầu với Nền tảng Google Maps để hoàn thành các bước sau:

Tạo một tài khoản thanh toán.
Tạo một dự án.
Bật API và SDK của nền tảng Google Maps (được liệt kê trong phần trước).
Tạo khoá API.

Các yêu cầu khác đối với lớp học lập trình này

Để 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:

Tài khoản Google Cloud Platform đã bật tính năng thanh toán
Khóa API Google Maps Platform với SDK Maps dành cho iOS được bật
Kiến thức cơ bản về Mục tiêu-C
Xcode 12.0 với SDK mục tiêu là 12.0 trở lên

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

Với bước bật bên dưới, bạn sẽ cần bật SDK Maps 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.

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.

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.
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.

Thiết lập mẫu dành cho người mới bắt đầu dự án

Trước khi bạn bắt đầu tham gia lớp học lập trình này, hãy làm như sau để tải mẫu dự án dành cho người mới bắt đầu xuống cũng như mã giải pháp hoàn chỉnh:

Tải xuống hoặc phân phối kho lưu trữ GitHub cho lớp học lập trình này tại https://github.com/googlecodelabs/maps-platform-101-objc.

Dự án StarterApp nằm trong thư mục /starter và bao gồm cấu trúc tệp cơ bản mà bạn cần phải hoàn thành 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.

Nếu bạn muốn xem mã giải pháp đầy đủ đang chạy, bạn có thể hoàn tất các bước thiết lập ở trên và xem giải pháp 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.

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.

Trong lớp học lập trình này, bạn sẽ sử dụng cả SDK Maps dành cho iOS, cung cấp tất cả các chức năng cốt lõi của Google Maps và Thư viện tiện ích Maps iOS, cung cấp nhiều tiện ích nhằm 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ở Pods > Podfile và cập nhật tệp để bao gồm SDK Maps cho các phần phụ thuộc iOS và Thư viện tiện ích trong phần use_frameworks!:

pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'

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. Cocoapod sẽ tự động tải các phần phụ thuộc xuống cũng như tạo StarterApp.xcworkspace. 3. Sau khi cài đặt các phần phụ thuộc, hãy mở StarterApp.xcworkspace 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 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.h.

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 "AppDelegate.h":

@import GoogleMaps;

Bên dưới câu lệnh nhập SDK iOS, hãy khai báo một hằng số NSString với giá trị được đặt thành khóa API:

static NSString *const kMapsAPIKey = @"YOUR API KEY";

Chuyển khóa API đến SDK iOS bằng cách gọi provideAPIKey trên GMSServices trong application: didFinishLaunchingWithOptions:

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}

Tệp AppDelegate.m mà bạn cập nhật sẽ có dạng như sau:

#import "AppDelegate.h"
@import GoogleMaps;

static NSString *const kMapsAPIKey = @"YOUR API KEY";

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}
@end

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

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

target 'StarterApp' do
  use_frameworks!

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

end

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.

Mở ViewController.m.

Đây là nơi bạn sẽ làm tất cả những việc còn lại trong lớp học lập trình này. Bạn sẽ nhận thấy 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 phần sau ở đầu tệp:

@import GoogleMaps;

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 sẽ làm việc cùng trong suốt lớp học lập trình này và bạn sẽ tham chiếu cũng như thực hiện thao tác 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ữ:

@implementation ViewController {
  GMSMapView *_mapView;
}

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

GMSCameraPosition xác định vị trí bản đồ sẽ được căn giữa và mức thu phóng sẽ 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:

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];

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 mapWithFrame:camera:. Lưu ý cách khung được đặt thành CGRectZero, 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.

Để thực sự hiển thị bản đồ, tiếp theo, bạn sẽ đặt chế độ xem gốc của bộ điều khiển chế độ xem thành _mapview, thao tác này sẽ hiển thị bản đồ ở chế độ toàn màn hình.

_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;

Đặ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 trong các bước 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:

@interface ViewController ()<GMSMapViewDelegate>

Tiếp theo, hãy thêm thông tin sau để đặ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!

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.m của bạn hiện sẽ có dạng như sau:

#import "ViewController.h"
#import "LocationGenerator.h"
@import GoogleMaps;

@interface ViewController ()<GMSMapViewDelegate>
@end

@implementation ViewController {
  GMSMapView *_mapView;
}

- (void)loadView {
  [super loadView];
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;
  _mapView.delegate = self;
}

5. Tạo bản đồ dựa trên đám mây (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:

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

Thêm ID bản đồ vào ứng dụng của bạn

Để sử dụng mã bản đồ mà bạn đã tạo ở bước trước, hãy mở tệp ViewController.m 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.m

- (void)loadView {
    GMSMapID *mapID = [[GMSMapID alloc] initWithIdentifier:@"YOUR_MAP_ID"];
    _mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
    // ...
}

Sau khi bạn hoàn tất bước này, hãy tiếp tục và 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 điều 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 trên bản đồ chắc chắn là phổ biến nhất. Điểm đánh dấu cho phép bạn hiển thị 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ì có thể bạn đã quen thuộc với điểm đánh dấu mặc định, giống như thế này:

Trong bước này, bạn sẽ tìm hiểu 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 bạn sẽ 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.

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 đồ. Bạn có thể truy cập vào các tọa độ của trung 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.

CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);

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 một đối tượng CLLocationCoordinate2D để cho SDK biết vị trí đặt điểm đánh dấu trên bản đồ.

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];

Đặ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. Bạn sẽ nhận thấy rằng dự án StarterApp có một hình ảnh tên là "custom_pin.png\39"; bạn có thể dùng một hình ảnh nhưng bạn có thể 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 imageNamed:@"custom_pin.png"];

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 bạn sẽ nhận thấy điểm đánh dấu không nằm 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!

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.m giờ đây sẽ có dạng như sau:

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
}

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

Khi sử dụng nhiều điểm đánh dấu hoặ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 chồng chéo hoặc xuất hiện quá đông đúc cùng 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ư sau:

Đâ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 lân cận thành một biểu tượng duy nhất thay đổi tùy thuộc vào mức thu phóng, như sau:

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 ô. Thật may là bạn không phải lo lắng về bất cứ điều gì trong số đó, vì nhóm Google Maps Platform đã tạo ra một thư viện tiện ích nguồn mở hữu ích gọi là SDK Google Maps dành cho Thư viện tiện ích iOS. Thư viện này, cùng với nhiều tùy chọn khác, tự động xử lý việc nhóm điểm đánh dấu cho bạn. Bạn có thể đọ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.

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 LocationGenerator.m.

Để thêm nhiều điểm đánh dấu vào bản đồ như bạn muốn, bạn chỉ cần gọi generateMarkersNear:count: trong vòng đời viewDidLoad của bộ điều khiển chế độ xem 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 chỉ cần chuyển cho biến mapCenter mà bạn đã tạo trước đó. Các điểm đánh dấu được trả về trong một NSArray.

NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

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 các mục sau vào danh sách các phần phụ thuộc ở đầu ViewController.m:

@import GoogleMapsUtils;

Đị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. Bạn chỉ cần thêm những mục sau:

id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];

id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];

id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];

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, sử dụ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:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
}

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

_clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

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ể phân cụm điểm đánh dấu của bạn đã được định cấu hình. Bạn chỉ cần chuyển cho trình quản lý cụm để nhận mảng được đánh dấu cần nhóm lại bằng cách gọi addItems:, sau đó chạy trình phân giải bằng cách gọi cluster.

[_clusterManager addItems:markerArray];
[_clusterManager cluster];

Tải lại ứng dụng của bạn và bây giờ bạn sẽ thấy rất nhiều điểm đánh dấu được nhóm hợp lý. Hãy tiếp tục và chơi với 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ỏ.

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.m sẽ có dạng như sau:

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude,
                                                                _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
  NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

  id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
  id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];
  id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
  _clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

  [_clusterManager addItems: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ụ: ủy quyền chế độ xem bản đồ 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 lượt tương tác như người dùng nhấp vào bản đồ và đ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ẽ lập trình để xoay bản đồ vào giữa bất kỳ điểm đánh dấu nào do người dùng nhấn.

Triển khai trình nghe nhấn vào điểm đánh dấu.

mapView:didTapMarker đượ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 đó, cũng như 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 đ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 tua lại ở cuối ViewController.m trước câu lệnh end.

Bạn sẽ nhận thấy rằng phương thức này đang trả về NO. 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.

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {

  return NO;
}

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:didTapMarker sẽ chuyển bản sao của GMSMarker đã được nhấn vào, cho phép bạn xử lý việc này 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 animateToLocation: trên chế độ xem bản đồ từ bên trong trình xử lý sự kiện và chuyển nó vào vị trí của phiên bản đánh dấu, có sẵn trong thuộc tính position.

[_mapView animateToLocation:marker.position];

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, 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 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.

Khi biết bằng cách nhấn vào một cụm bằng cách lập trình, bạn có thể gọi animateToZoom: 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 thu phóng. Mức thu phóng hiện tại có sẵn trên bản sao chế độ xem bản đồ trong tài sản camera.zoom.

Ngoài ra, hãy lưu ý cách mã bên dưới trả về YES. Đ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 ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
}

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:didTapMarker của bạn sẽ có dạng như sau:

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  return NO;
}

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

Cho đến nay, bạn đã tạo được bản đồ của Sydney hiển thị 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 SDK Maps dành cho iOS để thêm một tính năng hữu ích bổ sung cho trải nghiệm bản đồ của mình.

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. Tiếp theo, bạn sẽ 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 điểm này được nhấp vào.

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

Biến thực thể này sẽ dùng để lưu vòng tròn đượ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 hữu ích cho người dùng và sẽ trông khá xấu nếu mỗi điểm đánh dấu được nhấn đều có một vòng tròn bao quanh!

Để thực hiện việc này, hãy cập nhật việc triển khai ViewController như sau:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
  GMSCircle *_circ;
}

Vẽ vòng tròn khi nhấn vào điểm đánh dấu.

Ở cuối phương thức mapView:didTapMarker, thêm mã sau để tạo một phiên bản của lớp GMSCircle iOS SDK để vẽ vòng tròn bán kính 800 mét mới bằng cách gọi circleWithPosition:radius: và chuyển vị trí của điểm đánh dấu được nhấn, giống như bạn đã làm ở trên khi di chuyển bản đồ.

_circ = [GMSCircle circleWithPosition:marker.position radius:800];

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. Kết quả này sẽ phù hợp để hiển thị bán kính, nhưng không trông rất đẹp và sẽ hơi khó nhìn. 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ã sau sẽ thêm màu xám với độ minh bạch 50%:

_circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];

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 đó, bạn sẽ nhận thấy rằng chỉ tạo một bản sao của GMSCircle sẽ không xuất hiện trên bản đồ. Để làm điều này, bạn chỉ cần chỉ định phiên bản chế độ xem bản đồ cho thuộc tính map của vòng tròn.

_circ.map = _mapView;

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 khi họ tiếp tục thêm các 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 _circ thành nil ở đầu mapView:didTapMarker.

_circ.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ẽ mỗi khi nhấn vào một điểm đánh dấu và bất kỳ vòng tròn hiển thị nào đã bị xóa trước đó.

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:didTapMarker của bạn phải có dạng như sau:

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  _circ.map = nil;
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  _circ = [GMSCircle circleWithPosition:marker.position radius:800];
  _circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
  _circ.map = _mapView;
  return NO;
}

10. Xin chúc mừng

Bạn đã tạo thành công ứng dụng iOS đầu tiên của mình bằng cách sử dụng Google Maps Platform, bao gồm tải SDK Maps cho iOS, tải bản đồ, làm việc với các điểm đánh dấu, điều khiển và vẽ trên bản đồ cũng như thêm tương tác của người dùng.

Để xem mã đã hoàn tất, hãy xem dự án đã hoàn tất là thư mục /solution.

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

Trong lớp học lập trình này, chúng tôi chỉ nói về những việc cơ bản mà bạn có thể làm với SDK Maps dành cho iOS. Tiếp theo, hãy thử thêm một số tính năng sau đây vào bản đồ:

Thay đổi loại bản đồ để hiển thị bản đồ vệ tinh, kết hợp và địa hình.
Tùy chỉnh các tương tác khác của người dùng như điều khiển thu phóng và bản đồ.
Thêm cửa sổ thông tin để hiển thị thông tin khi các điểm đánh dấu được nhấp vào.
Tham khảo SDK địa điểm dành cho iOS để thêm dữ liệu và tính năng địa điểm phong phú của Nền tảng Google Maps vào ứng dụng của bạn.

Để tiếp tục tìm hiểu những cách khác giúp bạn làm việc với Google Maps Platform trên web, hãy xem các liên kết sau: