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

บทแนะนำนี้แสดงวิธีเพิ่มแผนที่ 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 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 แล้วเรียกใช้คำสั่งต่อไปนี้

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

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

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

หากต้องการทำบทแนะนำนี้ให้เสร็จสมบูรณ์ คุณต้องมีคีย์ API ของ Google ที่ได้รับอนุญาตให้ ใช้ 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 ด้วย

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

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