Tuỳ chỉnh điểm đánh dấu cơ bản

Chọn nền tảng: Android iOS JavaScript

Bản đồ San Francisco có điểm đánh dấu được tạo kiểu tuỳ chỉnh

Bạn có thể tuỳ chỉnh giao diện của điểm đánh dấu bằng cách truyền một Pin.Configuration thực thể đến (Marker3D.Style.pin(_:)) Điều này cho phép bạn thay đổi màu nền và màu đường viền, văn bản và màu biểu tượng, độ cao , hình ảnh sẽ dùng và nhiều lựa chọn khác để tuỳ chỉnh thêm.

Đoạn mã mẫu sau đây cho biết cách tạo một điểm đánh dấu mới và tạo kiểu cho điểm đánh dấu đó bằng một số lựa chọn tuỳ chỉnh hiện có:

Map(mode: .hybrid) {
  Marker3D(
      position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
      label: "London",
      style: .pin(.init(scale: 2.0))
  )
}

Trang này cho biết cách tuỳ chỉnh điểm đánh dấu theo những cách sau:

Điều chỉnh tỷ lệ điểm đánh dấu

Để điều chỉnh tỷ lệ điểm đánh dấu, hãy sử dụng lựa chọn scale:

Map(mode: .hybrid) {
  Marker3D(
      position: .init(latitude: 35.6762, longitude: 139.6503, altitude: 0.0),
        label: "Tokyo",
        style: .pin(
          .init(
            backgroundColor: .blue,
            borderColor: .yellow,
            scale: 2.0
            ) {Text("G").minimumScaleFactor(0.01)}
        )
  )
}

Thay đổi màu nền

Sử dụng tham số backgroundColor trên Pin.Configuration để thay đổi màu nền của điểm đánh dấu:

Map(mode: .hybrid){
  Marker3D(
    position: .init(latitude: 48.8566, longitude: 2.3522, altitude: 0.0),
    label: "Paris",
    style: .pin(.init(backgroundColor: .yellow)) // Changes the pin's background color
  )
}

Thay đổi màu đường viền

Sử dụng tham số borderColor trên Pin.Configuration để thay đổi màu đường viền của điểm đánh dấu:

Map(mode: .hybrid){
  Marker3D(
    position: .init(latitude: -22.9068, longitude: -43.1729, altitude: 0.0),
    label: "Rio de Janeiro",
    style: .pin(.init(backgroundColor: .green, borderColor: .brown)) // Customizes the pin border
  )
}

Thêm văn bản vào biểu tượng

Sử dụng tham số đóng @ViewBuilder biểu tượng trên Pin.Configuration để thay thế biểu tượng mặc định bằng một ký tự văn bản. Biểu tượng văn bản của điểm đánh dấu sẽ điều chỉnh tỷ lệ theo điểm đánh dấu:

Map(mode: .hybrid){
  Marker3D(
    position: .init(latitude: 25.2048, longitude: 55.2708, altitude: 0.0),
    label: "Dubai",
    style: .pin(.init(backgroundColor: .green) {
        Text("D") // Adds text inside the marker glyph
    })
  )
}