Thêm bản đồ bằng đ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 của bạn. Hướng dẫn này phù hợp với những người có kiến thức từ mới bắt đầu hoặc trung cấp về Swift hoặc Objective-C cũng như có 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 theo 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 kho lưu trữ mẫu dành cho iOS của Google Maps trên GitHub.
Ngoài ra, hãy nhấp vào nút sau để tải mã nguồn xuống:
Swift
/* * Copyright 2020 Google Inc. All rights reserved. * * * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this * file except in compliance with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF * ANY KIND, either express or implied. See the License for the specific language governing * permissions and limitations under the License. */ 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
/* * Copyright 2020 Google Inc. All rights reserved. * * * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this * file except in compliance with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF * ANY KIND, either express or implied. See the License for the specific language governing * permissions and limitations under the License. */ #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 Maps dành cho iOS bằng Trình quản lý gói Swift.
- Đảm bảo bạn đã xoá mọi SDK Maps hiện có cho các phần phụ thuộc iOS.
- Mở cửa sổ dòng lệnh rồi chuyển đến thư mục
tutorials/mapwithmarker
. -
Hãy đảm bảo bạn đã đóng không gian làm việc Xcode của mình rồi 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
- Mở dự án Xcode của bạn và xoá tệp Podfile.
- Chuyển đến File > Add Package Dependencies (Tệp > Thêm phần phụ thuộc gói).
- Nhập https://github.com/googlemaps/ios-maps-sdk làm URL, nhấn Enter để kéo gói vào và nhấp vào Thêm gói.
- Bạn có thể phải đặt lại bộ nhớ đệm của gói bằng cách sử dụng File > Packages > Reset Package cache (Tệp > Gói > Đặt lại bộ nhớ đệm của gói).
Sử dụng CocoaPods
- Tải xuống và cài đặt Xcode phiên bản 14.0 trở lên.
- Nếu bạn chưa cài đặt CocoaPods, hãy cài đặt ứng dụng này trên macOS bằng cách chạy lệnh sau trên cửa sổ dòng lệnh:
sudo gem install cocoapods
- Chuyển đến thư mục
tutorials/map-with-marker
. - Chạy lệnh
pod install
. Thao tác này sẽ cài đặt SDK Maps được chỉ định trongPodfile
, cùng với mọi phần phụ thuộc. - Chạy
pod outdated
để so sánh phiên bản nhóm đã cài đặt với mọi bản cập nhật mới. Nếu phát hiện thấy phiên bản mới, hãy chạypod update
để cập nhậtPodfile
và cài đặt SDK mới nhất. Để biết thêm thông tin, hãy xem Hướng dẫn về CocoaPods. - Mở (nhấp đúp) vào tệp map-with-marker.xcworkspace
của dự án để mở tệp đó trong Xcode. Bạn phải 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ó khoá API của Google được phép sử dụng SDK Maps dành 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 bài viết Lấy khoá API.
Thêm khoá API vào ứng dụng của bạn
Thêm khoá API vào AppDelegate.swift
như sau:
- Lưu ý rằng câu lệnh nhập sau đã được thêm vào tệp:
import GoogleMaps
- 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
- 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 lược đồ Xcode.
- Nếu bạn đang sử dụng một thiết bị, hãy đảm bảo 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.
- 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 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 đồ với điểm đánh dấu nằm ở 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 để chắc chắn rằng bạn đã lấy khoá API và thêm khoá đó vào ứng dụng, như mô tả ở trên. Hãy 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 bằng 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 rằng bạn có kết nối Wi-Fi hoặc GPS tốt.
- Sử dụng Công cụ gỡ lỗi bằng mã QR để xem nhật ký và gỡ lỗi ứng dụng.
Tìm hiểu đoạn mã
- Tạo bản đồ và đặt nó làm chế độ xem 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;
- Thêm điểm đánh dấu vào bản đồ ở
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 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 dành cho iOS hiển thị bản đồ của Google bằng một điểm đánh dấu để chỉ ra một vị trí cụ thể. Bạn cũng đã tìm hiểu cách sử dụng SDK Maps 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.