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

Hướng dẫn này cho biết cách thêm một bản đồ Google đơn giản 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 cơ bản hoặc trung cấp về Swift hoặc Objective-C cùng với kiến thức chung về Xcode. Để biết 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 tại Sydney, Úc.

Lấy mã

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

Ngoài ra, bạn có thể nhấp vào nút sau để tải mã nguồn xuống:

Cho tôi mã

Swift

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

Objective-C

#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

Trình quản lý gói Swift

Bạn có thể cài đặt SDK Bản đồ cho iOS bằng Trình quản lý gói Swift.

1. Đảm bảo bạn đã xoá mọi phần phụ thuộc hiện có của SDK Bản đồ dành cho iOS.
2. Mở cửa sổ dòng lệnh rồi chuyển đến thư mục tutorials/map-with-marker.
3. Đảm bảo rằng không gian làm việc Xcode của bạn đã đóng và chạy các lệnh sau:

   sudo gem install cocoapods-deintegrate cocoapods-clean
   pod deintegrate
   pod cache clean --all
   rm Podfile
   rm map-with-marker.xcworkspace

4. Mở dự án Xcode và xoá tệp podfile.
5. Chuyển đến File (Tệp) > Add Package Dependencies (Thêm phần phụ thuộc gói).
6. Nhập https://github.com/googlemaps/ios-maps-sdk làm URL, nhấn Enter để lấy gói và nhấp vào Add Package (Thêm gói).
7. Bạn có thể cần đặt lại bộ nhớ đệm gói bằng cách sử dụng File > Packages > Reset Package Cache (Tệp > Gói > Đặt lại bộ nhớ đệm gói).

Sử dụng CocoaPods

1. Tải xuống và cài đặt Xcode phiên bản 15.0 trở lên.
2. Nếu bạn chưa có CocoaPods, hãy cài đặt trên macOS bằng cách chạy lệnh sau trong dòng lệnh:

   sudo gem install cocoapods

3. Chuyển đến thư mục tutorials/map-with-marker.
4. Chạy lệnh pod install. Thao tác này sẽ cài đặt SDK Maps được chỉ định trong Podfile, cùng với mọi phần phụ thuộc.
5. Chạy pod outdated để so sánh phiên bản pod đã cài đặt với mọi bản cập nhật mới. Nếu phát hiện phiên bản mới, hãy chạy pod update để cập nhật Podfile và cài đặt SDK mới nhất. Để biết thêm thông tin chi tiết, hãy xem Hướng dẫn về CocoaPods.
6. Mở (nhấp đúp) tệp map-with-marker.xcworkspace của dự án để mở tệp đó trong Xcode. Bạn phải sử dụng tệp .xcworkspace để mở dự án.

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ó một khoá API Google được uỷ quyền để sử dụng SDK Maps cho iOS. Nhấp vào nút sau để nhận khoá và kích hoạt API.

Bắt đầu

Để biết thêm thông tin chi tiết, hãy xem phần Lấy khoá API.

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

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

1. Xin lưu ý rằng câu lệnh nhập sau đã đượ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 của bạn:

   GMSServices.provideAPIKey("YOUR_API_KEY")

Lưu ý: Mã mẫu cho hướng dẫn đã hoàn thành được định cấu hình để chạy dưới dạng dự án Swift Xcode nhưng bao gồm các ví dụ về Swift và Objective-C.

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 một trình mô phỏng trong trình đơn giao thức Xcode.
2. Nếu bạn đang sử dụng một thiết bị, hãy đảm bảo rằng bạn đã bật dịch vụ vị trí. 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 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, sau đó 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 ở giữa Sydney trên bờ biển phía đông của Úc, tương tự như hình ảnh trên trang này.

Gỡ rối:

• 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ước đó. 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 giá trị nhận dạng gói iOS, hãy chỉnh sửa khoá để thêm giá trị nhận dạng gói cho ứng dụng: com.google.examples.map-with-marker.
• Đảm bảo bạn có kết nối Wi-Fi hoặc GPS tốt.
• Sử dụng công cụ gỡ lỗi Xcode để xem nhật ký và gỡ lỗi ứng dụng.

Tìm hiểu mã

1. Tạo một bản đồ và đặt bản đồ đó làm thành phần 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 Maps 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 một điểm đánh dấu. Bạn không cần thêm trình nghe 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 bản đồ và những việc bạn có thể làm với điểm đánh dấu.