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

Sản phẩm hoặc tính năng này đang trong giai đoạn thử nghiệm (trước khi phát hành rộng rãi). Các sản phẩm và tính năng trước giai đoạn phát hành rộng rãi có thể bị hạn chế về dịch vụ hỗ trợ, đồng thời những thay đổi đối với các sản phẩm và tính năng trước giai đoạn phát hành rộng rãi có thể không tương thích với các phiên bản trước giai đoạn phát hành rộng rãi khác. Các Sản phẩm trước giai đoạn phát hành rộng rãi tuân theo Điều khoản dành riêng cho dịch vụ của Nền tảng Google Maps. Để biết thêm thông tin, hãy xem nội dung mô tả về giai đoạn ra mắt.

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

Bạn có thể tuỳ chỉnh giao diện của các điểm đánh dấu bằng cách định cấu hình đối tượng PinStyle. Loại PinStyle cung cấp các lựa chọn để thay đổi màu nền và màu đường viền, văn bản và màu của glyph, độ cao, hình ảnh sẽ được 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 có sẵn:

Map(mode: .hybrid) {
  Marker(
      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ệ của điểm đánh dấu
• Thay đổi màu nền
• Thay đổi màu đường viền
• Thêm văn bản vào một glyph

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

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

Map(mode: .hybrid) {
  Marker(
      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 lựa chọn PinElement.background để thay đổi màu nền của một điểm đánh dấu:

Map(mode: .hybrid){
  Marker(
    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 lựa chọn markerOptions.borderColor để thay đổi màu đường viền của một điểm đánh dấu:

Map(mode: .hybrid){
  Marker(
    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 một glyph

Sử dụng phương thức markerOptions.glyph để thay thế glyph mặc định bằng một ký tự văn bản. Glyph văn bản của điểm đánh dấu sẽ được điều chỉnh tỷ lệ theo điểm đánh dấu:

Map(mode: .hybrid){
  Marker(
    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
    }
  )
}