เพิ่มแผนที่

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

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

เกริ่นนำ

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

การเพิ่มแผนที่

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

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

    1. ตั้งค่าใน Google Cloud Console

    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 เพิ่มเติมได้

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

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