Kiểm soát hành vi va chạm

Trang này minh hoạ cách đặt trạng thái va chạm cho một điểm đánh dấu. Trạng thái va chạm kiểm soát cách một điểm đánh dấu sẽ hiển thị nếu điểm đánh dấu đó va chạm (chồng chéo) với một điểm đánh dấu khác.

Để đặt trạng thái va chạm, hãy đặt collisionBehavior thành một trong những giá trị sau:

• REQUIRED: Luôn hiển thị điểm đánh dấu bất kể có bị trùng lặp hay không
• REQUIRED_AND_HIDES_OPTIONAL: Luôn hiển thị điểm đánh dấu bất kể có xung đột hay không, đồng thời ẩn mọi điểm đánh dấu hoặc nhãn OPTIONAL_AND_HIDES_LOWER_PRIORITY sẽ chồng chéo với điểm đánh dấu.
• OPTIONAL_AND_HIDES_LOWER_PRIORITY: Chỉ hiển thị điểm đánh dấu nếu điểm đánh dấu đó không trùng lặp với các điểm đánh dấu khác. Nếu hai điểm đánh dấu thuộc loại này trùng lặp, thì điểm đánh dấu có zIndex cao hơn sẽ xuất hiện. Nếu các thành phần có cùng zIndex, thì thành phần có vị trí màn hình dọc thấp hơn sẽ xuất hiện.

Ví dụ sau đây minh hoạ cách đặt trạng thái va chạm cho một điểm đánh dấu:

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

Kiểm soát trạng thái va chạm của nhãn

Bạn có thể kiểm soát riêng biệt trạng thái va chạm của ghim và văn bản nhãn của điểm đánh dấu. Trong một số trường hợp, bạn nên ẩn nhãn trong khi vẫn hiển thị ghim đánh dấu trên màn hình để giữ nguyên ngữ cảnh. Để làm việc này, hãy thêm một phần tử <gmp-label-3d> làm phần tử đồng cấp của <gmp-marker-3d> và liên kết chúng bằng thuộc tính for.

Mã mẫu sau đây minh hoạ cách đặt hành vi va chạm cho một nhãn tách biệt với điểm đánh dấu:

const markerWithIndependentLabel = new Marker3DElement({
    position: { lat: 37.423, lng: -122.015 },
});
markerWithIndependentLabel.id = 'marker-1';
const label = new Label3DElement({
    collisionBehavior: CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY,
    for: 'marker-1',
});
label.append('Independent label example');
map.append(markerWithIndependentLabel);
map.append(label);
index.js