เพิ่มแผนที่ด้วยเครื่องหมาย
บทแนะนำนี้จะแสดงวิธีเพิ่มแผนที่ Google แบบง่ายๆ ด้วยเครื่องหมายลงใน iOS ของคุณ แอป เหมาะกับผู้ที่มีความรู้ระดับเริ่มต้นหรือระดับกลางเกี่ยวกับ Swift หรือ Objective-C ตลอดจนความรู้ทั่วไปของ Xcode สำหรับคำแนะนำขั้นสูง การสร้างแผนที่ อ่านนักพัฒนา
คุณจะสร้างแผนที่ต่อไปนี้โดยใช้บทแนะนำนี้ เครื่องหมายอยู่ในตำแหน่ง ซิดนีย์ ออสเตรเลีย
รับโค้ด
โคลนหรือดาวน์โหลด ที่เก็บตัวอย่างสำหรับ Google Maps สำหรับ iOS บน GitHub
หรือให้คลิกปุ่มต่อไปนี้เพื่อดาวน์โหลดซอร์สโค้ด
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
เริ่มต้นใช้งาน
เครื่องมือจัดการแพ็กเกจ Swift
Maps SDK สำหรับ iOS สามารถติดตั���งได้โดยใช้ Swift Package Manager
- ตรวจสอบว่าคุณได้นำ Maps SDK สำหรับทรัพยากร Dependency ของ iOS ที่มีอยู่ออก
- เปิดหน้าต่างเทอร์มินัลและไปยังไดเรกทอรี
tutorials/map-with-marker
-
ตรวจสอบว่าพื้นที่ทำงาน Xcode ปิดอยู่และเรียกใช้คำสั่งต่อไปนี้
sudo gem install cocoapods-deintegrate cocoapods-clean pod deintegrate pod cache clean --all rm Podfile rm map-with-marker.xcworkspace
- เปิดโปรเจ็กต์ Xcode แล้วลบ Podfile
- ไปที่ไฟล์ > เพิ่มทรัพยากร Dependency ของแพ็กเกจ
- ป้อน https://github.com/googlemaps/ios-maps-sdk เป็น URL กด Enter เพื่อดึงแพ็กเกจ แล้วคลิกเพิ่มแพ็กเกจ
- คุณอาจต้องรีเซ็ตแคชแพ็กเกจโดยใช้ ไฟล์ > แพ็กเกจ > รีเซ็ตแคชแพ็กเกจ
ใช้ CocoaPods
- ดาวน์โหลดและติดตั้ง Xcode เวอร์ชัน 15.0 ขึ้นไป
- หากคุณยังไม่มี CocoaPods
ให้ติดตั้งใน macOS โดยเรียกใช้คำสั่งต่อไปนี้จากเทอร์มินัล
sudo gem install cocoapods
- ไปที่ไดเรกทอรี
tutorials/map-with-marker
- เรียกใช้คำสั่ง
pod install
การดำเนินการนี้จะติดตั้ง Maps SDK ที่ระบุไว้ในPodfile
พร้อมกับทรัพยากร Dependency ทั้งหมด - เรียกใช้
pod outdated
เพื่อเปรียบเทียบเวอร์ชันพ็อดที่ติดตั้งกับการอัปเดตใหม่ หากตรวจพบเวอร์ชันใหม่ ให้เรียกใช้pod update
เพื่ออัปเดตPodfile
และติดตั้ง SDK เวอร์ชันล่าสุด โปรดดูรายละเอียดเพิ่มเติมในคู่มือ CocoaPods - เปิด (ดับเบิลคลิก) map-with-marker.xcworkspace ของโปรเจ็กต์
เพื่อเปิดใน Xcode คุณต้องใช้ไฟล์
.xcworkspace
เพื่อเปิดโปรเจ็กต์
รับคีย์ API และเปิดใช้ API ที่จำเป็น
หากต้องการจบบทแนะนำนี้ คุณต้องมีคีย์ Google API ที่ได้รับอน��ญาตให้ ใช้ Maps SDK สำหรับ iOS คลิกปุ่มต่อไปนี้เพื่อรับ คีย์และเปิดใช้งาน API
เริ่มต้นใช้งานดูรายละเอียดเพิ่มเติมได้ที่ รับคีย์ API
เพิ่มคีย์ API ลงในแอปพลิเคชัน
เพิ่มคีย์ API ลงใน AppDelegate.swift
ดังนี้
- โปรดทราบว่าคำสั่งนำเข้าต่อไปนี้ได้เพิ่มลงในไฟล์แล้ว:
import GoogleMaps
- แก้ไขบรรทัดต่อไปนี้ใน
application(_:didFinishLaunchingWithOptions:)
โดยแทนที่ YOUR_API_KEY ด้วยคีย์ API ของคุณGMSServices.provideAPIKey("YOUR_API_KEY")
สร้างและเรียกใช้แอป
- เชื่อมต่ออุปกรณ์ iOS กับคอมพิวเตอร์ หรือเลือก เครื่องจำลอง จากเม���ูรูปแบบ Xcode
- หากคุณใช้อุปกรณ์ ให้ตรวจสอบว่าได้เปิดใช้บริการตำแหน่งแล้ว หากใช้เครื่องจำลอง ให้เลือกตำแหน่งจากฟีเจอร์ เมนู
- ใน Xcode ให้คลิกตัวเลือกเมนู Product/Run (หรือการเล่น )
- Xcode จะสร้างแอป จากนั้นเรียกใช้แอปในอุปกรณ์หรือเครื่องจำลอง
- คุณควรจะเห็นแผนที่ที่มีเครื่องหมายศูนย์กลางอยู่ที่ซิดนีย์บนชายฝั่งตะวันออกของออสเตรเลีย คล้าย��ับภาพในหน้านี้
การแก้ปัญหา:
- หากคุณไม่เห็นแผนที่ ให้ตรวจสอบว่าคุณมีคีย์ API และเพิ่มแล้ว ไปยังแอปได้ตามที่อธิบายไว้ก่อนหน้านี้ ตรวจสอบ คอนโซลการแก้ไขข้อบกพร่องของ Xcode สำหรับข้อความแสดงข้อผิดพลาดเกี่ยวกับคีย์ API
- หากคุณจำกัดคีย์ API ตามตัวระบุกลุ่ม iOS ให้แก้ไข
สำหรับเพิ่มตัวระบุชุดซอฟต์แวร์ให้กับแอป ดังนี้
com.google.examples.map-with-marker
- ตรวจสอบว่าคุณมีการเชื่อมต่อ Wi-Fi หรือ GPS ที่ดี
- ใช้เครื่องมือแก้ไขข้อบกพร่อง Xcode เพื่อดูบันทึกและแก้ไขข้อบกพร่องของแอป
ทำความเข้าใจโค้ด
- สร้างแผนที่และตั้งเป็นมุมมองใน
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;
- เพิ่มเครื่องหมายบนแผนที่ใน
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;
โดยค่าเริ่มต้น Maps SDK สำหรับ iOS จะแสดงเนื้อหาของข้อมูล เมื่อผู้ใช้แตะเครื่องหมาย ไม่จำเป็นต้องเพิ่ม Listener การคลิกสำหรับ เครื่องหมายหากคุณยินดีใช้การทำงานเริ่มต้น
ยินดีด้วย คุณได้สร้างแอป iOS ที่แสดงแผนที่ Google พร้อม เพื่อระบุตำแหน่งที่เจาะจง คุณยังได้เรียนรู้วิธีใช้ Maps SDK สำหรับ iOS
ขั้นตอนถัดไป
ดูรายละเอียดออบเจ็กต์แผนที่และสิ่งที่ ก็ทำได้ด้วย markers