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

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

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

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

ดูรายละเอียดออบเจ็กต์แผนที่และสิ่งที่ ก็ทำได้ด้วย markers