Bạn có thể tuỳ chỉnh giao diện của đ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à màu đường viền, văn bản và màu của ký tự tượng hình,
độ 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.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
- Thay đổi màu nền
- Thay đổi màu đường viền
- Thêm văn bản vào ký tự tượng hình
- 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 dùng lựa chọn scale:
map.addMarker(
markerOptions {
position = sanFrancisco
style = pinConfiguration {
scale = 3.14
}
}
)
Thay đổi màu nền
Dùng lựa 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
Dùng lựa 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ự tượng hình
Dùng phương thức markerOptions.glyph để thay thế ký tự tượng hình mặc định bằng một ký tự văn bản. Ký tự tượng hình 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.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
Dùng Marker.remove() để xoá điểm đánh dấu khỏi bản đồ:
marker.remove();