Đ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, ngoài độ cao mà điểm đánh dấu xuất hiện. Ví dụ sau đây minh hoạ 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 hai lớp có sẵn:

Chức năng MarkerElement Marker3DElement
Tùy 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 được)
Hiệu suất Hiệu suất tương tác thấp hơn (FPS giảm khi có số lượng lớn điểm đánh dấu) Hiệu suất tương tác cao hơn (Tối ưu hoá để hiển thị 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 lên đến khoảng 1.000 điểm đánh dấu Nên dùng để 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ự, 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

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.

function initMap() {
  const map = new Map3DElement({
    center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
    tilt: 67.5,
    range: 45000,
    mode: MapMode.HYBRID
  });

  const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  interactiveMarker.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

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

Chỉ định cách một đ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},
    collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});

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

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

Bước tiếp theo