Thêm bản đồ

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

Bản đồ được biểu thị trong API bằng lớp GMSMapView, một lớp con của UIView. Bản đồ là đối tượng quan trọng nhất trong SDK Bản đồ dành cho iOS và cung cấp các phương thức cần thiết để thêm, xoá và quản lý các đối tượng khác như điểm đánh dấu và đa tuyến.

Giới thiệu

SDK Bản đồ dành cho iOS cho phép bạn hiển thị bản đồ của Google trong ứng dụng iOS. Các bản đồ này có giao diện giống như bản đồ bạn thấy trong ứng dụng iOS Google Maps và SDK cũng hiển thị nhiều tính năng tương tự.

Ngoài chức năng liên kết, API này cũng hỗ trợ một loạt các hoạt động tương tác nhất quán với mô hình giao diện người dùng iOS. Ví dụ: bạn có thể thiết lập các hoạt động tương tác với bản đồ bằng cách xác định các trình phản hồi phản ứng với cử chỉ của người dùng, chẳng hạn như nhấn và nhấn đúp.

Lớp chính khi làm việc với đối tượng Map là lớp GMSMapView. GMSMapView tự động xử lý các thao tác sau:

  • Kết nối với dịch vụ Google Maps.
  • Đang tải thẻ thông tin bản đồ xuống.
  • Hiển thị thẻ thông tin trên màn hình thiết bị.
  • Hiển thị nhiều chế độ điều khiển như xoay và thu phóng.
  • Phản hồi các cử chỉ kéo và thu phóng bằng cách di chuyển bản đồ và phóng to hoặc thu nhỏ.
    • Phản hồi cử chỉ hai ngón tay bằng cách nghiêng góc xem của bản đồ.

Ngoài các thao tác tự động này, bạn có thể kiểm soát hành vi và giao diện của bản đồ thông qua các thuộc tính và phương thức do lớp GMSMapView hiển thị. GMSMapView cho phép bạn thêm và xoá điểm đánh dấu, lớp phủ mặt đất và đường đa tuyến, thay đổi loại bản đồ hiển thị cũng như kiểm soát nội dung hiển thị trên bản đồ thông qua lớp GMSCameraPosition.

Xây dựng Maps bằng SwiftUI

SwiftUI cung cấp một cách khác để tạo giao diện người dùng bằng phương pháp khai báo. Bạn chỉ cần cho SwiftUI biết bạn muốn khung hiển thị của mình trông như thế nào cùng với tất cả các trạng thái khác nhau cho khung hiển thị đó, còn hệ thống sẽ thực hiện phần còn lại. SwiftUI xử lý việc cập nhật thành phần hiển thị bất cứ khi nào trạng thái cơ bản thay đổi do một sự kiện hoặc hành động của người dùng.

SDK Bản đồ dành cho iOS được xây dựng dựa trên UIKit và không cung cấp chế độ xem tương thích với SwiftUI. Để thêm bản đồ trong SwiftUI, bạn cần tuân thủ UIViewRepresentable hoặc UIViewControllerRepresentable. Để tìm hiểu thêm, hãy xem Lớp học lập trình thêm bản đồ vào ứng dụng iOS bằng SwiftUI.

Thêm bản đồ

Sau đây là các bước cơ bản để thêm bản đồ:

  1. Để tải SDK, lấy khoá API và thêm các khung bắt buộc, hãy làm theo các bước trong:

    1. Thiết lập trong Google Cloud Console

    2. Sử dụng khoá API

    3. Thiết lập dự án Xcode

    4. Trong AppDelegate, hãy cung cấp khoá API cho phương thức lớp provideAPIKey: trên GMSServices.

    5. Tạo hoặc cập nhật ViewController. Nếu bản đồ hiển thị khi trình điều khiển thành phần hiển thị này hiển thị, hãy nhớ tạo bản đồ đó trong phương thức viewDidLoad.

    6. Khi khởi tạo chế độ xem bản đồ, hãy đặt các tuỳ chọn cấu hình bằng GMSMapViewOptions. Các thuộc tính bao gồm frame, camera, mapID,backgroundColor hoặc screen.

    7. Đặt thuộc tính camera tuỳ chọn bản đồ bằng đối tượng GMSCameraPosition. Thông tin này chỉ định tâm và mức thu phóng của bản đồ.

    8. Tạo và tạo bản sao của lớp GMSMapView bằng phương thức GMSMapView options:. Nếu bản đồ này được dùng làm chế độ xem duy nhất của trình điều khiển khung hiển thị, thì bạn có thể sử dụng giá trị mặc định frame của tuỳ chọn bản đồ là CGRectZero làm chế độ xem frame — bản đồ sẽ tự động đổi kích thước.

    9. Đặt đối tượng GMSMapView làm thành phần hiển thị của trình kiểm soát thành phần hiển thị. Ví dụ: self.view = mapView;.

Ví dụ bên dưới thêm một bản đồ, tập trung vào trung tâm thành phố Singapore, vào một ứng dụng.

Swift

import GoogleMaps

class MapObjects : UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()

    let options = GMSMapViewOptions()
    options.camera = GMSCameraPosition(latitude: 1.285, longitude: 103.848, zoom: 12)
    options.frame = self.view.bounds;

    let mapView = GMSMapView(options:options)
    self.view = mapView
  }
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = [GMSCameraPosition cameraWithLatitude:1.285
                                                        longitude:103.848
                                                             zoom:12];
  options.frame = self.view.bounds;

  GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
  self.view = mapView;
}

Sau khi làm theo các bước này, bạn có thể định cấu hình thêm đối tượng GMSMapView.

Bước tiếp theo

Sau khi hoàn tất các bước này, bạn có thể định cấu hình chế độ cài đặt bản đồ.