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

บทแนะนำนี้แสดงวิธีเพิ่ม Google Maps ที่มีเครื่องหมายลงในแอป iOS เหมาะสำหรับผู้ที่มีความรู้ระดับเริ่มต้นหรือระดับกลางเกี่ยวกับ Swift หรือ Objective-C รวมถึงความรู้ทั่วไปเกี่ยวกับ Xcode หากต้องการดูคู่มือขั้นสูงสำหรับการสร้างแผนที่ โปรดอ่านคู่มือสำหรับนักพัฒนาซอฟต์แวร์

คุณจะสร้างแผนที่ต่อไปนี้โดยใช้บทแนะนำนี้ เครื่องหมายอยู่ที่ซิดนีย์ ออสเตรเลีย

รับโค้ด

โคลนหรือดาวน์โหลดที่เก็บตัวอย่าง iOS ของ Google Maps ใน 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 options = GMSMapViewOptions()
        options.camera = camera
        options.frame = self.view.frame
        let mapView = GMSMapView(options: options)
        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];
  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = camera;
  options.frame = self.view.frame;
  GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
  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. นำทรัพยากร Dependency ของ Maps SDK สำหรับ iOS ที่มีอยู่ออก
2. เปิดหน้าต่างเทอร์มินัลและไปที่ไดเรกทอรี tutorials/map-with-marker
3. ปิด Xcode Workspace และเรียกใช้คำสั่งต่อไปนี้

   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 เพื่อดึงแพ็กเกจเข้ามา จากนั้นคลิก Add Package
7. คุณอาจต้องรีเซ็ตแคชแพ็กเกจโดยใช้ไฟล์ > แพ็กเกจ > รีเซ็ตแคชแพ็กเกจ

รับคีย์ 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 options = GMSMapViewOptions()
   options.camera = camera
   let mapView = GMSMapView(options: options)
   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];
   GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
   options.camera = camera;
   GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
   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 SDK สำหรับ iOS ด้วย

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

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