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

Bạn có thể tuỳ chỉnh giao diện của điểm đánh dấu bằng hàm khởi tạo pinConfiguration. Hàm khởi tạo pinConfiguration cung cấp các phương thức để thay đổi màu nền và màu đường viền, văn bản và màu của ký tự, độ cao, hình ảnh sẽ được sử dụng và nhiều lựa chọn khác để tuỳ chỉnh thêm.

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

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     backgroundColor = Color.GREEN
     borderColor = Color.GREEN
     glyph = Glyph.fromColor(Color.RED)
   }
 }
)

Trang này hướng dẫn bạn 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
• Thay đổi màu nền
• Thay đổi màu đường viền
• Thêm văn bản vào ký tự
• Sử dụng hình ảnh làm điểm đánh dấu
• Xoá điểm đánh dấu

Đ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 tuỳ chọn scale:

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     scale = 3.14
   }
 }
)

Thay đổi màu nền

Sử dụng tuỳ chọn PinElement.background để thay đổi màu nền của điểm đánh dấu trong quá trình tạo:

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     backgroundColor = Color.GREEN
   }
 }
)

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

Sử dụng tuỳ chọn markerOptions.borderColor để thay đổi màu đường viền của điểm đánh dấu trong quá trình tạo:

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     borderColor = Color.GREEN
   }
 }
)

Thêm văn bản vào ký tự

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

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     glyph = Glyph.fromText("G")
   }
 }
)

Sử dụng hình ảnh làm điểm đánh dấu

Map.addMarker(markerOptions {
  position = latLngAltitude {
      latitude = 40.7484
      longitude = -73.9857
      altitude = 100.0
  }
  zIndex = 1
  label = "Empire State Building"
  isExtruded = true
  isDrawnWhenOccluded = true
  altitudeMode = AltitudeMode.RELATIVE_TO_MESH
  setStyle(ImageView(R.drawable.ook))
})

Xoá điểm đánh dấu

Sử dụng Marker.remove() để xoá điểm đánh dấu khỏi bản đồ:

marker.remove();