เพิ่มแผนที่ด้วยเครื่องหมาย

บทแนะนำนี้จะแสดงวิธีเพิ่มแผนที่ 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

1. ตรวจสอบว่าคุณได้นำ Maps SDK สำหรับทรัพยากร Dependency ของ iOS ที่มีอยู่ออก
2. เปิดหน้าต่างเทอร์มินัลและไปยังไดเรกทอรี tutorials/map-with-marker
3. ตรวจสอบว่าพื้นที่ทำงาน Xcode ปิดอยู่และเรียกใช้คำสั่งต่อไปนี้

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

4. เปิดโปรเจ็กต์ Xcode แล้วลบ Podfile
5. ไปที่ไฟล์ > เพิ่มทรัพยากร Dependency ของแพ็กเกจ
6. ป้อน https://github.com/googlemaps/ios-maps-sdk เป็น URL กด Enter เพื่อดึงแพ็กเกจ แล้วคลิกเพิ่มแพ็กเกจ
7. คุณอาจต้องรีเซ็ตแคชแพ็กเกจโดยใช้ ไฟล์ > แพ็กเกจ > รีเซ็ตแคชแพ็กเกจ

ใช้ CocoaPods

1. ดาวน์โหลดและติดตั้ง Xcode เวอร์ชัน 15.0 ขึ้นไป
2. หากคุณยังไม่มี CocoaPods ให้ติดตั้งใน macOS โดยเรียกใช้คำสั่งต่อไปนี้จากเทอร์มินัล

   sudo gem install cocoapods

3. ไปที่ไดเรกทอรี tutorials/map-with-marker
4. เรียกใช้คำสั่ง pod install การดำเนินการนี้จะติดตั้ง Maps SDK ที่ระบุไว้ใน Podfile พร้อมกับทรัพยากร Dependency ทั้งหมด
5. เรียกใช้ pod outdated เพื่อเปรียบเทียบเวอร์ชันพ็อดที่ติดตั้งกับการอัปเดตใหม่ หากตรวจพบเวอร์ชันใหม่ ให้เรียกใช้ pod update เพื่ออัปเดต Podfile และติดตั้ง SDK เวอร์ชันล่าสุด โปรดดูรายละเอียดเพิ่มเติมในคู่มือ CocoaPods
6. เปิด (ดับเบิลคลิก) map-with-marker.xcworkspace ของโปรเจ็กต์ เพื่อเปิดใน Xcode คุณต้องใช้ไฟล์ .xcworkspace เพื่อเปิดโครงการ

รับคีย์ API และเปิดใช้ API ที่จำเป็น

หากต้องการจบบทแนะนำนี้ คุณต้องมีคีย์ Google API ที่ได้รับอนุญาตให้ ใช้ Maps SDK สำหรับ iOS คลิกปุ่มต่อไปนี้เพื่อรับ คีย์และเปิดใช้งาน API

เริ่มต้นใช้งาน

ดูรายละเอียดเพิ่มเติมได้ที่ รับคีย์ API

เพิ่มคีย์ API ลงในแอปพลิเคชัน

เพิ่มคีย์ API ลงใน AppDelegate.swift ดังนี้

1. โปรดทราบว่าคำสั่งนำเข้าต่อไปนี้ได้เพิ่มลงในไฟล์แล้ว:

   import GoogleMaps

2. แก้ไขบรรทัดต่อไปนี้ใน application(_:didFinishLaunchingWithOptions:) โดยแทนที่ YOUR_API_KEY ด้วยคีย์ API ของคุณ

   GMSServices.provideAPIKey("YOUR_API_KEY")

หมายเหตุ: โค้ดตัวอย่างสำหรับบทแนะนำที่สมบูรณ์ได้รับการกำหนดค่าให้ทำงานเป็นโปรเจ็กต์ Swift Xcode แต่จะมีตัวอย่าง Swift และ Objective-C

สร้างและเรียกใช้แอป

1. เชื่อมต่ออุปกรณ์ iOS กับคอมพิวเตอร์ หรือเลือก เครื่องจำลอง จากเมนูรูปแบบ Xcode
2. หากคุณใช้อุปกรณ์ ให้ตรวจสอบว่าได้เปิดใช้บริการตำแหน่งแล้ว หากใช้เครื่องจำลอง ให้เลือกตำแหน่งจากฟีเจอร์ เมนู
3. ใน Xcode ให้คลิกตัวเลือกเมนู Product/Run (หรือการเล่น )
• Xcode จะสร้างแอป จากนั้นเรียกใช้แอปในอุปกรณ์หรือเครื่องจำลอง
• คุณควรจะเห็นแผนที่ที่มีเครื่องหมายศูนย์กลางอยู่ที่ซิดนีย์บนชายฝั่งตะวันออกของออสเตรเลีย คล้ายกับภาพในหน้านี้

การแก้ปัญหา:

• หากคุณไม่เห็นแผนที่ ให้ตรวจสอบว่าคุณมีคีย์ API และเพิ่มแล้ว ไปยังแอปได้ตามที่อธิบายไว้ก่อนหน้านี้ ตรวจสอบ คอนโซลการแก้ไขข้อบกพร่องของ Xcode สำหรับข้อความแสดงข้อผิดพลาดเกี่ยวกับคีย์ API
• หากคุณจำกัดคีย์ API ตามตัวระบุกลุ่ม iOS ให้แก้ไข สำหรับเพิ่มตัวระบุชุดซอฟต์แวร์ให้กับแอป ดังนี้ com.google.examples.map-with-marker
• ตรวจสอบว่าคุณมีการเชื่อมต่อ Wi-Fi หรือ GPS ที่ดี
• ใช้เครื่องมือแก้ไขข้อบกพร่อง Xcode เพื่อดูบันทึกและแก้ไขข้อบกพร่องของแอป

ทำความเข้าใจโค้ด

1. สร้างแผนที่และตั้งเป็นมุมมองใน 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. เพิ่มเครื่องหมายบนแผนที่ใน 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