ป๊อปอัป

เลือกแพลตฟอร์ม: 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(latitude: 37.8270, longitude: -122.4230)) {
      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(latitude: 37.7955, longitude: -122.3937)) {
      Marker(position: ferryBuilding)
        .popover(isOpen: $isOpen) {
          Text("Ferry Building")
        }
        .onTap {
          isOpen.toggle()
        }
    }
  }
}