เพิ่มแผนที่

เลือกแพลตฟอร์ม: Android iOS JavaScript

Maps จะแสดงใน API ด้วยคลาส GMSMapView ซึ่งเป็น คลาสย่อยของ UIView. แผนที่เป็นออบเจ็กต์ที่สำคัญที่สุดใน Maps SDK สำหรับ iOS และมีเมธอดที่จำเป็นสำหรับการเพิ่ม การนำออก และการจัดการออบเจ็กต์อื่นๆ เช่น มาร์กเกอร์และเส้นหลายเหลี่ยม

บทนำ

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

นอกจากฟังก์ชันการทำงานของ Maps แล้ว API ยังรองรับการโต้ตอบที่หลากหลายซึ่งสอดคล้องกับโมเดล UI ของ iOS ด้วย ตัวอย่างเช่น คุณสามารถตั้งค่าการโต้ตอบกับแผนที่ได้โดยกำหนดตัวจัดการเหตุการณ์ที่ตอบสนองต่อท่าทางผู้ใช้ เช่น การแตะและการแตะสองครั้ง

คลาสหลักเมื่อทำงานกับออบเจ็กต์ Map คือคลาส GMSMapView GMSMapView จะจัดการการดำเนินการต่อไปนี้โดยอัตโนมัติ

  • การเชื่อมต่อกับบริการ Google Maps
  • การดาวน์โหลดแผนที่แบบแยกส่วน
  • การแสดงแผนที่แบบแยกส่วนบนหน้าจออุปกรณ์
  • การแสดงตัวควบคุมต่างๆ เช่น การเลื่อนและการซูม
  • การตอบสนองต่อท่าทางสัมผัสการเลื่อนและการซูมด้วยการย้ายแผนที่และซูมเข้าหรือออก
    • การตอบสนองต่อท่าทางสัมผัส 2 นิ้วด้วยการเอียงมุมมองของแผนที่

นอกจากการดำเนินการอัตโนมัติเหล่านี้แล้ว คุณยังควบคุมลักษณะการทำงานและลักษณะที่ปรากฏของแผนที่ผ่านพร็อพเพอร์ตี้และเมธอดที่คลาส GMSMapView เปิดเผยได้ด้วย ใช้ GMSMapView เพื่อเพิ่มและนำมาร์กเกอร์ การซ้อนทับบนพื้น และเส้นหลายเหลี่ยมออก เปลี่ยนประเภทของแผนที่ที่แสดง และควบคุม สิ่งที่แสดงบนแผนที่ผ่านคลาส GMSCameraPosition

สร้าง Maps ด้วย SwiftUI

SwiftUI มีวิธีเพิ่มเติมในการสร้าง UI โดยใช้วิธีการประกาศ คุณบอก SwiftUI ว่าต้องการให้มุมมองมีลักษณะอย่างไร รวมถึงสถานะต่างๆ ทั้งหมดของมุมมองนั้น แล้วระบบจะจัดการส่วนที่เหลือ SwiftUI จะจัดการการอัปเดตมุมมองทุกครั้งที่สถานะพื้นฐานมีการเปลี่ยนแปลงเนื่องจากเหตุการณ์หรือการดำเนินการของผู้ใช้

Maps SDK สำหรับ iOS สร้างขึ้นบน UIKit และไม่มีมุมมองที่เข้ากันได้กับ SwiftUI การเพิ่ม Maps ใน SwiftUI ต้องเป็นไปตาม UIViewRepresentable หรือ UIViewControllerRepresentable ดูข้อมูลเพิ่มเติมได้ที่ Codelab การเพิ่ม Maps ลงในแอป iOS ด้วย SwiftUI

เพิ่มแผนที่

ขั้นตอนพื้นฐานในการเพิ่มแผนที่มีดังนี้

  1. หากต้องการรับ SDK, รับคีย์ API และเพิ่มเฟรมเวิร์กที่จำเป็น ให้ทำตามขั้นตอนในหัวข้อต่อไปนี้

    1. ตั้งค่าในคอนโซล Google Cloud

    2. ใช้คีย์ API

    3. ตั้งค่าโปรเจ็กต์ Xcode

    4. ใน AppDelegate ให้ระบุคีย์ API ของคุณไปยังเมธอดคลาส provideAPIKey: ใน GMSServices

    5. สร้างหรืออัปเดต ViewController หากแผนที่แสดงขึ้นเมื่อตัวควบคุมมุมมองนี้ปรากฏขึ้น โปรดสร้างแผนที่ภายในเมธอด viewDidLoad

    6. เมื่อเริ่มต้นมุมมองแผนที่ ให้ตั้งค่าตัวเลือกการกำหนดค่าด้วย GMSMapViewOptions พร็อพเพอร์ตี้ประกอบด้วย frame, camera, mapID,backgroundColor หรือ screen

    7. ตั้งค่าพร็อพเพอร์ตี้ ตัวเลือกแผนที่ camera ด้วยออบเจ็กต์ GMSCameraPosition ซึ่งจะระบุจุดกึ่งกลางและระดับการซูมของแผนที่

    8. สร้างและสร้างอินสแตนซ์คลาส GMSMapView โดยใช้เมธอด options: ของ GMSMapView หากจะใช้แผนที่นี้เป็นมุมมองเดียวของตัวควบคุมมุมมอง คุณสามารถใช้ค่าเริ่มต้น CGRectZero ของตัวเลือกแผนที่ frame เป็น frame ของมุมมองได้ โดยระบบจะปรับขนาดแผนที่โดยอัตโนมัติ

    9. ตั้งค่าออบเจ็กต์ GMSMapView เป็นมุมมองของตัวควบคุมมุมมอง เช่น self.view = mapView;

ตัวอย่างด้านล่างจะเพิ่มแผนที่ซึ่งมีจุดกึ่งกลางอยู่ที่ย่านใจกลางเมืองสิงคโปร์ลงในแอป

Swift

import GoogleMaps

class MapObjects : UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()

    let options = GMSMapViewOptions()
    options.camera = GMSCameraPosition(latitude: 1.285, longitude: 103.848, zoom: 12)
    options.frame = self.view.bounds;

    let mapView = GMSMapView(options:options)
    self.view = mapView
  }
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = [GMSCameraPosition cameraWithLatitude:1.285
                                                        longitude:103.848
                                                             zoom:12];
  options.frame = self.view.bounds;

  GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
  self.view = mapView;
}

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

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

หลังจากทำตามขั้นตอนเหล่านี้เสร็จแล้ว คุณสามารถ กำหนดค่าการตั้งค่าแผนที่ได้