เพิ่มแผนที่

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

แผนที่จะแสดงใน 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 ได้

สร้าง Maps ด้วย 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. ตั้งค่าพร็อพเพอร์ตี้ camera ตัวเลือกแผนที่ด้วยออบเจ็กต์ GMSCameraPosition ซึ่งจะระบุศูนย์กลางและระดับการซูมของแผนที่

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

    9. ตั้งค่าออบเจ็กต์ GMSMapView เป็นมุมมองของ ViewController เช่น 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 ออบเจ็กต์เพิ่มเติมได้

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

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