Sử dụng điểm đánh dấu để hiển thị các vị trí riêng lẻ trên bản đồ. Hướng dẫn này sẽ cho bạn biết cách sử dụng các điểm đánh dấu nâng cao. Với các điểm đánh dấu nâng cao, bạn có thể tạo và tuỳ chỉnh các điểm đánh dấu có hiệu suất cao, đồng thời tạo các điểm đánh dấu có thể truy cập để phản hồi các sự kiện nhấp vào DOM và dữ liệu đầu vào từ bàn phím. Để tuỳ chỉnh sâu hơn nữa, các điểm đánh dấu nâng cao hỗ trợ việc sử dụng HTML và CSS tuỳ chỉnh, bao gồm cả khả năng tạo điểm đánh dấu hoàn toàn tuỳ chỉnh. Đối với các ứng dụng 3D, bạn có thể kiểm soát độ cao mà một điểm đánh dấu xuất hiện.
Các điểm đánh dấu nâng cao được hỗ trợ trên cả bản đồ raster và bản đồ vectơ (mặc dù một số tính năng không có trên bản đồ raster).
Bạn phải có mã bản đồ để sử dụng Điểm đánh dấu nâng cao (bạn có thể sử dụng DEMO_MAP_ID).
Tuỳ chỉnh nền, ký tự và màu đường viền của điểm đánh dấu mặc định, đồng thời điều chỉnh kích thước điểm đánh dấu.
Thay thế biểu tượng điểm đánh dấu mặc định bằng một hình ảnh SVG hoặc PNG tuỳ chỉnh.
Tạo điểm đánh dấu HTML tuỳ chỉnh
Sử dụng HTML và CSS tuỳ chỉnh để tạo các điểm đánh dấu tương tác có hình ảnh đặc biệt và tạo ảnh động.
Khiến các điểm đánh dấu phản hồi sự kiện nhấp và sự kiện bàn phím
Khi thêm trình nghe sự kiện click, hãy làm cho điểm đánh dấu phản hồi các sự kiện nhấp và bàn phím.
functioninitMap(){constmap=newgoogle.maps.Map(document.getElementById('map'),{center:{lat:37.4239163,lng:-122.0947209},zoom:17,mapId:'DEMO_MAP_ID',});constmarker=newgoogle.maps.marker.AdvancedMarkerElement({map,position:{lat:37.4239163,lng:-122.0947209},});marker.addListener('click',({domEvent,latLng})=>{const{target}=domEvent;// Handle the click event.// ...});}
Đặt độ cao của điểm đánh dấu và hành vi va chạm
Đặt độ cao cho một điểm đánh dấu để điểm đánh dấu đó xuất hiện chính xác với các phần tử bản đồ 3D, đồng thời chỉ định cách một điểm đánh dấu hoạt động khi va chạm với một điểm đánh dấu hoặc nhãn bản đồ khác. Độ cao của điểm đánh dấu chỉ được hỗ trợ trên bản đồ vectơ.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-09-05 UTC."],[[["\u003cp\u003eAdvanced markers offer highly performant and customizable options for displaying single locations on Google Maps, including custom HTML and CSS for unique designs.\u003c/p\u003e\n"],["\u003cp\u003eThey are accessible, responding to DOM click events and keyboard input for enhanced user interaction.\u003c/p\u003e\n"],["\u003cp\u003eCustomization options include changing color, scale, icon image, and creating custom HTML markers with interactive elements and animations.\u003c/p\u003e\n"],["\u003cp\u003eAltitude control is available for 3D applications, enabling precise marker placement in three-dimensional spaces, although this feature is limited to vector maps.\u003c/p\u003e\n"],["\u003cp\u003eAdvanced markers are compatible with both raster and vector maps, requiring a map ID for implementation, and offer improved performance compared to legacy markers.\u003c/p\u003e\n"]]],["Advanced markers allow customization of map markers, including color, scale, and icons (SVG/PNG). Users can employ custom HTML and CSS for unique designs and animations. Markers can be made interactive via `click` event listeners, handling user clicks and keyboard input. Altitude and collision behavior can be defined for 3D maps. A map ID, like `DEMO_MAP_ID`, is needed, and these advanced markers are available on Android, iOS, and JavaScript platforms, supporting both raster and vector maps.\n"],null,[]]