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

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

Hình ảnh 3D về Thành phố New York có Tòa nhà Empire State với 3 điểm đánh dấu kỹ thuật số tuỳ chỉnh nổi phía trên, bao gồm cả một con khỉ đột hoạt hình có nhãn

Bạn có thể tuỳ chỉnh giao diện của các điểm đánh dấu bằng cách sử dụ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à đường viền, văn bản và màu sắc của ký tự, độ 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.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     backgroundColor = Color.GREEN
     borderColor = Color.GREEN
     glyph = Glyph.fromColor(Color.RED)
   }
 }
)

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ệ của một đ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 lựa chọn PinElement.background để thay đổi màu nền của một điểm đánh dấu trong quá trình xây dựng:

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

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 trong quá trình xây dựng:

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

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.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     glyph = Glyph.fromText("G")
   }
 }
)

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

Cách dùng Marker.remove() để xoá điểm đánh dấu khỏi bản đồ:

marker.remove();