เพิ่มแผนที่

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

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

เกริ่นนำ

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

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

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

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

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

สร้างแผนที่ด้วย SwiftUI

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

Maps SDK สำหรับ iOS สร้างขึ้นจาก UIKit และไม่มีมุมมองที่ใช้ร่วมกับ SwftUI ได้ การเพิ่มแผนที่ใน SwiftUI ต้องสอดคล้องกับ UIViewRepresentable หรือ UIViewControllerRepresentable ดูข้อมูลเพิ่มเติมได้ที่ Codelab การเพิ่มแผนที่ลงในแอป 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 โดยใช้เมธอด GMSMapView options: หากจะใช้แผนที่นี้เป็นมุมมองอย่างเดียวของตัวควบคุมการดู คุณสามารถใช้ตัวเลือกแผนที่ frame ค่าเริ่มต้นของ CGRectZero เป็นมุมมอง 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 เพิ่มเติมได้

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

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