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

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

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

รับโค้ด

โคลนหรือดาวน์โหลดที่เก็บตัวอย่างของ Google Maps สำหรับ iOS ใน GitHub

หรือคลิกปุ่มต่อไปนี้เพื่อดาวน์โหลดซอร์สโค้ด

โปรดระบุรหัส

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
  }
}
      

#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
      

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

รับคีย์ 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")

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

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 ด้วย

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

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