Thêm bản đồ

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

Maps đượ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 Maps dành cho iOS, đồng thời cung cấp các phương pháp 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à hình nhiều đường.

Giới thiệu

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

Ngoài chức năng ánh xạ, API cũng hỗ trợ nhiều 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ể đặt tương tác với bản đồ bằng cách xác định người trả lờ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 khoá khi làm việc với đối tượng ánh xạ 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 các lát bản đồ xuống.
  • Đang hiện các ô trên màn hình thiết bị.
  • Hiển thị các chế độ điều khiển như kéo và thu phóng.
  • Phản hồi cử chỉ xoay 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ỉ dùng 2 ngón tay bằng cách nghiêng góc xem của bản đồ.

Ngoài các hoạt động tự động này, bạn có thể kiểm soát hành vi và sự xuất hiện của bản đồ thông qua các thuộc tính và phương pháp được hiển thị bởi Lớp GMSMapView. GMSMapView cho phép bạn thêm và xóa điểm đánh dấu, mặt đất lớp phủ và hình nhiều đường, thay đổi loại bản đồ được hiển thị và điều khiển những gì được hiển thị trên bản đồ thông qua GMSCameraPosition .

Xây dựng bản đồ 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 cho SwiftUI biết cách bạn muốn hiển thị khung hiển thị cùng với tất cả các trạng thái khác nhau cho nó và hệ thống sẽ làm phần việc còn lại. SwiftUI xử lý việc cập nhật khung 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 Khung hiển thị tương thích với SwiftUI. Để thêm bản đồ trong SwiftUI, bạn phải tuân theo một trong hai UIViewRepresentable hoặc UIViewControllerRepresentable. Để tìm hiểu thêm, hãy xem Lớp học lập trình cách thêm bản đồ vào ứng dụng iOS bằng SwiftUI.

Thêm bản đồ

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

  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 một dự án Xcode

    4. Trong AppDelegate, hãy cung cấp khoá API cho provideAPIKey: trên GMSServices.

    5. Tạo hoặc cập nhật ViewController. Nếu bản đồ được hiển thị khi bộ điều khiển chế độ xem sẽ hiển thị, hãy nhớ tạo bộ điều khiển này trong viewDidLoad.

    6. Khi khởi chạy chế độ xem bản đồ của bạn, hãy đặt các tuỳ chọn cấu hình với 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 thuộc tính Đối tượng GMSCameraPosition. Giá trị này xác định mức trung tâm và mức thu phóng của bản đồ.

    8. Tạo và tạo thực thể cho lớp GMSMapView bằng GMSMapView options:. Nếu bản đồ này được sử dụng làm chỉ có thể xem, giá trị mặc định của CGRectZero của tuỳ chọn bản đồ frame có thể là được sử dụng làm chế độ xem frame — bản đồ được 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 điều khiển chế độ xem. Ví dụ: self.view = mapView;.

Ví dụ dưới đây sẽ thêm một bản đồ tại 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 cho GMSMapView .

Các bước tiếp theo

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