Thêm bản đồ có điểm đánh dấu

Hướng dẫn này trình bày cách thêm bản đồ Google có điểm đánh dấu vào ứng dụng iOS. Hướng dẫn này phù hợp với những người có kiến thức ở mức cơ bản hoặc trung cấp về Swift hoặc Objective-C, cũng như kiến thức chung về Xcode. Để xem hướng dẫn nâng cao về cách tạo bản đồ, hãy đọc hướng dẫn dành cho nhà phát triển.

Bạn sẽ tạo bản đồ sau đây bằng hướng dẫn này. Điểm đánh dấu được đặt ở Sydney, Úc.

Lấy mã

Sao chép hoặc tải kho lưu trữ mẫu Google Maps iOS xuống trên GitHub.

Ngoài ra, hãy nhấp vào nút sau để tải mã nguồn xuống:

Lấy mã

import UIKit
import GoogleMaps

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        // Create a GMSCameraPosition that tells the map to display the
        // coordinate -33.86,151.20 at zoom level 6.
        let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
        let mapView = GMSMapView.map(withFrame: self.view.frame, camera: camera)
        self.view.addSubview(mapView)

        // Creates a marker in the center of the map.
        let marker = GMSMarker()
        marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
        marker.title = "Sydney"
        marker.snippet = "Australia"
        marker.map = mapView
  }
}
      

#import "ViewController.h"
#import <GoogleMaps/GoogleMaps.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
  // Do any additional setup after loading the view.
  // Create a GMSCameraPosition that tells the map to display the
  // coordinate -33.86,151.20 at zoom level 6.
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                          longitude:151.20
                                                               zoom:6];
  GMSMapView *mapView = [GMSMapView mapWithFrame:self.view.frame camera:camera];
  mapView.myLocationEnabled = YES;
  [self.view addSubview:mapView];

  // Creates a marker in the center of the map.
  GMSMarker *marker = [[GMSMarker alloc] init];
  marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
  marker.title = @"Sydney";
  marker.snippet = @"Australia";
  marker.map = mapView;
}

@end
      

Bắt đầu

Lấy khoá API và bật các API cần thiết

Để hoàn tất hướng dẫn này, bạn cần có khoá API Google được uỷ quyền sử dụng SDK Bản đồ dành cho iOS. Nhấp vào nút sau để lấy khoá và kích hoạt API.

Để biết thêm thông tin, hãy xem bài viết Lấy khoá API.

Thêm khoá API vào ứng dụng

Thêm khoá API vào AppDelegate.swift như sau:

1. Lưu ý rằng câu lệnh nhập sau đây đã được thêm vào tệp:

   import GoogleMaps

2. Chỉnh sửa dòng sau trong phương thức application(_:didFinishLaunchingWithOptions:), thay thế YOUR_API_KEY bằng khoá API:

   GMSServices.provideAPIKey("YOUR_API_KEY")

Tạo và chạy ứng dụng

1. Kết nối thiết bị iOS với máy tính hoặc chọn trình mô phỏng trong trình đơn lược đồ Xcode.
2. Nếu bạn đang sử dụng thiết bị, hãy đảm bảo rằng các dịch vụ vị trí đã được bật. Nếu bạn đang sử dụng trình mô phỏng, hãy chọn một vị trí trong trình đơn Features (Tính năng).
3. Trong Xcode, hãy nhấp vào tuỳ chọn trình đơn Product/Run (Sản phẩm/Chạy) (hoặc biểu tượng nút phát ).
• Xcode sẽ tạo ứng dụng rồi chạy ứng dụng đó trên thiết bị hoặc trên trình mô phỏng.
• Bạn sẽ thấy một bản đồ có điểm đánh dấu ở trung tâm Sydney trên bờ biển phía đông của Úc, tương tự như hình ảnh trên trang này.

Khắc phục sự cố:

• Nếu bạn không thấy bản đồ, hãy kiểm tra để đảm bảo rằng bạn đã lấy khoá API và thêm khoá đó vào ứng dụng, như mô tả ở trên. Kiểm tra bảng điều khiển gỡ lỗi của Xcode để xem thông báo lỗi về khoá API.
• Nếu bạn đã hạn chế khoá API theo mã nhận dạng gói iOS, hãy chỉnh sửa khoá để thêm mã nhận dạng gói cho ứng dụng: com.google.examples.map-with-marker.
• Đảm bảo rằng bạn có kết nối Wi-Fi hoặc GPS tốt.
• Sử dụng các công cụ gỡ lỗi của Xcode để xem nhật ký và gỡ lỗi ứng dụng.

Tìm hiểu mã

1. Tạo bản đồ và đặt bản đồ đó làm khung hiển thị trong viewDidLoad().

   Swift

   // Create a GMSCameraPosition that tells the map to display the
   // coordinate -33.86,151.20 at zoom level 6.
   let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
   let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
   view = mapView
         

   Objective-C

   // Create a GMSCameraPosition that tells the map to display the
   // coordinate -33.86,151.20 at zoom level 6.
   GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                           longitude:151.20
                                                                zoom:6.0];
   GMSMapView *mapView = [[GMSMapView alloc] initWithFrame: CGRectZero camera:camera];
   self.view = mapView;
         

2. Thêm điểm đánh dấu vào bản đồ trong viewDidLoad().

   Swift

   // Creates a marker in the center of the map.
   let marker = GMSMarker()
   marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
   marker.title = "Sydney"
   marker.snippet = "Australia"
   marker.map = mapView
         

   Objective-C

   // Creates a marker in the center of the map.
   GMSMarker *marker = [[GMSMarker alloc] init];
   marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
   marker.title = @"Sydney";
   marker.snippet = @"Australia";
   marker.map = mapView;
         

Theo mặc định, SDK Bản đồ dành cho iOS sẽ hiển thị nội dung của cửa sổ thông tin khi người dùng nhấn vào điểm đánh dấu. Bạn không cần thêm trình theo dõi lượt nhấp cho điểm đánh dấu nếu muốn sử dụng hành vi mặc định.

Xin chúc mừng! Bạn đã tạo một ứng dụng iOS hiển thị bản đồ Google có điểm đánh dấu để cho biết một vị trí cụ thể. Bạn cũng đã tìm hiểu cách sử dụng SDK Bản đồ dành cho iOS.

Các bước tiếp theo

Tìm hiểu thêm về đối tượng ánh xạ và những việc bạn có thể làm với điểm đánh dấu.