ป๊อปอัป

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

แผนที่ซานฟรานซิสโกพร้อมเครื่องหมายและป๊อปโอเวอร์เหนือ Ferry Building

ป๊อปโอเวอร์จะแสดงเนื้อหา (โดยปกติจะเป็นข้อความหรือรูปภาพ) ในหน้าต่างบอลลูนข้อมูลเหนือแผนที่ ณ ตำแหน่งที่ระบุ ป๊อปโอเวอร์มีพื้นที่เนื้อหาและก้านเรียว ส่วนปลายของก้านจะติดอยู่กับตำแหน่งที่ระบุบนแผนที่

โดยปกติแล้วคุณจะแนบป๊อปโอเวอร์กับ มาร์กเกอร์โดยใช้.popover ตัวแก้ไข แต่คุณยังแนบป๊อปโอเวอร์กับLatLngพิกัดที่เฉพาะเจาะจง ด้วย โหมดความสูง หรือชดเชยจาก มาร์กเกอร์ก็ได้

เพิ่มป๊อปโอเวอร์

หากต้องการเพิ่มป๊อปโอเวอร์ ให้สร้างเอนทิตี Popover และตั้งค่าตัวเลือก รวมถึงโหมดตำแหน่งและความสูง ตำแหน่งคือออบเจ็กต์ LatLngAltitude ซึ่งกำหนดตำแหน่งที่จะแสดงป๊อปโอเวอร์ คุณสามารถควบคุมวิธีตีความความสูงเมื่อยึดตาม LatLngAltitude ได้โดยการตั้งค่าโหมดความสูง หากยึดตามมาร์กเกอร์ ระบบจะใช้ตำแหน่งของมาร์กเกอร์แทน

คุณสามารถปรับแต่งเนื้อหาของป๊อปโอเวอร์ได้โดยใช้ SwiftUI Views คุณสามารถระบุเลย์เอาต์ที่กำหนดเองได้โดยส่งการปิดตัวสร้าง View ไปยังเอนทิตี Popover หรือตัวแก้ไข .popover

เพิ่มป๊อปโอเวอร์ลงในออบเจ็กต์ LatLngAltitude

ตัวอย่างโค้ดต่อไปนี้จะเพิ่มป๊อปโอเวอร์ลงในออบเจ็กต์ LatLngAltitude

import GoogleMaps3D
import SwiftUI

struct SimpleCoordinatePopover: View {
  @State private var isOpen = true
  // Alcatraz Island coordinates
  private let alcatraz = LatLngAltitude(latitude: 37.8270, longitude: -122.4230)

  var body: some View {
    Map(initialCamera:
      .init(center: .init(latitude: 37.8270, longitude: -122.4230)),
      mode: .hybrid) {
        Popover(
          positionAnchor: alcatraz,
          isOpen: $isOpen
        ) {
          Text("Alcatraz Island")
        }
      }
  }
}

เพิ่มป๊อปโอเวอร์ลงในมาร์กเกอร์

ตัวอย่างโค้ดต่อไปนี้จะเพิ่มป๊อปโอเวอร์ลงในมาร์กเกอร์

import GoogleMaps3D
import SwiftUI

struct SimpleMarkerPopover: View {
  @State private var isOpen = false
  // Ferry Building coordinates
  private let ferryBuilding = LatLngAltitude(latitude: 37.7955, longitude: -122.3937)

  var body: some View {
   Map(
      initialCamera: .init(center: .init(latitude: 37.7955, longitude: -122.3937)),
      mode: .hybrid
    ) {
      Marker3D(position: ferryBuilding)
        .popover(isOpen: $isOpen) {
          Text("Ferry Building")
        }
        .onTap {
          isOpen.toggle()
        }
    }
  }
}