Điểm đánh dấu

Sử dụng điểm đánh dấu để thu hút sự chú ý của người dùng đến một vị trí trên bản đồ. Hướng dẫn này minh hoạ cách sử dụng và tuỳ chỉnh điểm đánh dấu trong bản đồ 3D. Bạn có thể kiểm soát hình dạng, kích thước và màu sắc của điểm đánh dấu, cũng như độ cao mà điểm đánh dấu xuất hiện. Ví dụ sau đây cho thấy một điểm đánh dấu cơ bản:

Bản đồ 3D trong Maps JavaScript cung cấp 2 lớp điểm đánh dấu riêng biệt, mỗi lớp được tối ưu hoá cho các mục đích sử dụng cụ thể. Bảng sau đây cho thấy sự khác biệt và điểm đánh đổi giữa 2 lớp có sẵn:

Chức năng MarkerElement Marker3DElement
Tuỳ chỉnh Cao (Hỗ trợ các phần tử HTML tuỳ chỉnh, API ảnh động cốt lõi, v.v.) Thấp (Ít tuỳ chỉnh hơn)
Hiệu suất Hiệu suất tương tác thấp hơn (FPS giảm khi có nhiều điểm đánh dấu) Hiệu suất tương tác cao hơn (Được tối ưu hoá để kết xuất các tập dữ liệu lớn)
Dung lượng đề xuất Hiệu suất tương tác đáng tin cậy với tối đa khoảng 1.000 điểm đánh dấu Đề xuất để xử lý hơn 1.000 điểm đánh dấu

Tuỳ chỉnh màu sắc, tỷ lệ và hình ảnh biểu tượng

Tuỳ chỉnh nền, ký tự tượng hình, màu đường viền và kích thước của điểm đánh dấu mặc định.

Điểm đánh dấu tuỳ chỉnh

Thay thế biểu tượng điểm đánh dấu mặc định bằng một tài nguyên SVG tuỳ chỉnh.

Điểm đánh dấu có đồ hoạ

Đặt độ cao của điểm đánh dấu

Bạn có thể đặt độ cao của điểm đánh dấu bằng cách kéo dài điểm đánh dấu và đặt độ cao.

Điểm đánh dấu được đùn

Thiết lập để điểm đánh dấu phản hồi sự kiện nhấp và sự kiện bàn phím

Thiết lập để điểm đánh dấu phản hồi sự kiện nhấp và sự kiện bàn phím bằng cách thêm trình nghe sự kiện click.

const interactiveMarker = new Marker3DInteractiveElement({
    position,
    gmpPopoverTargetElement: popover,
});

Đặt trạng thái va chạm của điểm đánh dấu

Chỉ định cách điểm đánh dấu sẽ hoạt động khi va chạm với một điểm đánh dấu hoặc nhãn bản đồ khác.

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});

Hiệu suất của điểm đánh dấu

Điểm đánh dấu HTML tuỳ chỉnh (MarkerElement) có hiệu suất thấp hơn điểm đánh dấu 3D tiêu chuẩn (Marker3DElement). Đối với các ứng dụng có hơn 1.000 điểm đánh dấu, bạn nên sử dụng lớp Marker3dElement class để đảm bảo hiệu suất tối ưu.

Bước tiếp theo