เพิ่มแผนที่

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

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

บทนำ

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

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

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

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

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

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

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

Maps SDK สำหรับ iOS สร้างขึ้นบน UIKit และไม่มีมุมมองที่เข้ากันได้กับ SwiftUI การเพิ่มแผนที่ใน 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. ตั้งค่าพร็อพเพอร์ตี้ map options camera ด้วยออบเจ็กต์ GMSCameraPosition ซึ่งจะระบุจุดศูนย์กลางและระดับการซูมของแผนที่

    8. สร้างและสร้างอินสแตนซ์คลาส GMSMapView โดยใช้เมธอด GMSMapView options: หากจะใช้แผนที่นี้เป็นมุมมองเดียวของตัวควบคุมมุมมอง คุณสามารถใช้ค่าเริ่มต้น 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 เพิ่มเติมได้

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

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