Điểm đánh dấu nâng cao sử dụng hai lớp để xác định điểm đánh dấu: lớp AdvancedMarkerElement
cung cấp chức năng đánh dấu mặc định và PinElement
chứa các tuỳ chọn để tuỳ chỉnh thêm. Trang này cho bạn biết cách tuỳ chỉnh điểm đánh dấu theo những cách sau:
- Thêm văn bản tiêu đề
- Điều chỉnh tỷ lệ điểm đánh dấu
- Thay đổi màu nền
- Thay đổi màu đường viền
- Thay đổi màu nét chữ
- Ẩn ký tự
Thêm văn bản tiêu đề
Văn bản tiêu đề xuất hiện khi con trỏ di chuột qua một điểm đánh dấu. Trình đọc màn hình có thể đọc được văn bản tiêu đề. Sử dụng tuỳ chọn AdvancedMarkerElement.title
để thêm văn bản tiêu đề vào điểm đánh dấu:
TypeScript
// Default marker with title text (no PinElement). const markerViewWithText = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.03 }, title: 'Title text for the marker at lat: 37.419, lng: -122.03', });
JavaScript
// Default marker with title text (no PinElement). const markerViewWithText = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.03 }, title: "Title text for the marker at lat: 37.419, lng: -122.03", });
Điều chỉnh tỷ lệ điểm đánh dấu
Dùng lựa chọn PinElement.scale
để điều chỉnh tỷ lệ của điểm đánh dấu:
TypeScript
// Adjust the scale. const pinScaled = new PinElement({ scale: 1.5, }); const markerViewScaled = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.02 }, content: pinScaled.element, });
JavaScript
// Adjust the scale. const pinScaled = new PinElement({ scale: 1.5, }); const markerViewScaled = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.02 }, content: pinScaled.element, });
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:
TypeScript
// Change the background color. const pinBackground = new PinElement({ background: '#FBBC04', }); const markerViewBackground = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.01 }, content: pinBackground.element, });
JavaScript
// Change the background color. const pinBackground = new PinElement({ background: "#FBBC04", }); const markerViewBackground = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.01 }, content: pinBackground.element, });
Thay đổi màu đường viền
Sử dụng tuỳ chọn PinElement.borderColor
để thay đổi màu đường viền của một điểm đánh dấu:
TypeScript
// Change the border color. const pinBorder = new PinElement({ borderColor: '#137333', }); const markerViewBorder = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.03 }, content: pinBorder.element, });
JavaScript
// Change the border color. const pinBorder = new PinElement({ borderColor: "#137333", }); const markerViewBorder = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.03 }, content: pinBorder.element, });
Thay đổi màu nét chữ
Sử dụng tuỳ chọn PinElement.glyphColor
để thay đổi màu ký tự của điểm đánh dấu:
TypeScript
// Change the glyph color. const pinGlyph = new PinElement({ glyphColor: 'white', }); const markerViewGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.02 }, content: pinGlyph.element, });
JavaScript
// Change the glyph color. const pinGlyph = new PinElement({ glyphColor: "white", }); const markerViewGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.02 }, content: pinGlyph.element, });
Ẩn ký tự
Đặt tuỳ chọn PinElement.glyph
thành một chuỗi trống để ẩn ký tự của một điểm đánh dấu:
TypeScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: '', }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.01 }, content: pinNoGlyph.element, });
JavaScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: "", }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.01 }, content: pinNoGlyph.element, });
Ngoài ra, hãy đặt PinElement.glyphColor
thành cùng một giá trị với PinElement.background
.
Tính năng này có tác dụng ẩn ký tự trực quan.