Đ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 các tham số cơ bản (position
, title
và map
) và lớp PinElement
chứa các tuỳ chọn để tuỳ chỉnh thêm. Đoạn mã sau đây cho biết mã để tạo một PinElement
mới, sau đó áp dụng mã đó cho một điểm đánh dấu.
// Create a pin element.
const pin = new PinElement({
scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pin.element,
});
Trong bản đồ được tạo bằng HTML, các tham số cơ bản cho một điểm đánh dấu được khai báo bằng phần tử HTML gmp-advanced-marker
; mọi hoạt động tuỳ chỉnh sử dụng lớp PinElement
đều phải được áp dụng theo phương thức lập trình. Để thực hiện điều này, mã của bạn phải truy xuất các phần tử gmp-advanced-marker
từ trang HTML. Đoạn mã sau đây cho thấy mã để truy vấn tập hợp các phần tử gmp-advanced-marker
, sau đó lặp lại kết quả để áp dụng chế độ tuỳ chỉnh đã khai báo trong PinElement
.
// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];
// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
const pin = new PinElement({
scale: 2.0,
});
marker.appendChild(pin.element);
}
Trang này cho bạn biết cách tuỳ chỉnh điểm đánh dấu theo các 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 phông 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 đề.
Để thêm văn bản tiêu đề theo phương thức lập trình, hãy sử dụng tuỳ chọn AdvancedMarkerElement.title
:
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",
});
Để thêm văn bản tiêu đề vào một điểm đánh dấu tạo bằng HTML, hãy sử dụng thuộc tính title
:
<gmp-map
center="43.4142989,-124.2301242"
zoom="4"
map-id="DEMO_MAP_ID"
style="height: 400px"
>
<gmp-advanced-marker
position="37.4220656,-122.0840897"
title="Mountain View, CA"
></gmp-advanced-marker>
<gmp-advanced-marker
position="47.648994,-122.3503845"
title="Seattle, WA"
></gmp-advanced-marker>
</gmp-map>
Điều chỉnh tỷ lệ điểm đánh dấu
Để chia tỷ lệ điểm đánh dấu, hãy sử dụng tùy chọn scale
.
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.
Các bước tiếp theo:
Trừ khi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2024-05-14 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Thiếu thông tin tôi cần"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Quá phức tạp/quá nhiều bước"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Đã lỗi thời"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Vấn đề về bản dịch"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Vấn đề về mẫu/mã"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Khác"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Dễ hiểu"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Giúp tôi giải quyết được vấn đề"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Khác"
}]