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

บทแนะนำนี้จะแสดงวิธีเพิ่ม Google Maps แบบง่ายที่มีเครื่องหมายลงในแอป 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 Package Manager

คุณติดตั้ง Maps SDK สำหรับ iOS ได้โดยใช้ Swift Package Manager

1. ตรวจสอบว่าคุณได้นำการอ้างอิง Maps SDK สำหรับ 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 พร้อมกับไลบรารีที่เกี่ยวข้อง
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 จะแสดงเนื้อหาของหน้าต่างข้อมูลเมื่อผู้ใช้แตะเครื่องหมาย คุณไม่จําเป็นต้องเพิ่มตัวรับฟังการคลิกสําหรับเครื่องหมายหากต้องการใช้ลักษณะการทํางานเริ่มต้น

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

ขั้นตอนถัดไป

ดูข้อมูลเพิ่มเติมเกี่ยวกับออบเจ็กต์แผนที่และสิ่งที่คุณทำได้ด้วยเครื่องหมาย