ควบคุมลักษณะการชน

เลือกแพลตฟอร์ม: Android iOS JavaScript

หน้านี้แสดงวิธีตั้งค่าลักษณะการทำงานเมื่อเกิดการทับซ้อนสำหรับเครื่องหมาย ลักษณะการทำงานเมื่อเกิดการทับซ้อนจะควบคุมวิธีที่เครื่องหมายจะแสดงหากทับซ้อนกับเครื่องหมายอื่น

หากต้องการตั้งค่าการดำเนินการสำหรับการซ้อนทับ ให้ตั้งค่า collisionBehavior เป็นค่าใดค่าหนึ่งต่อไปนี้

  • REQUIRED: แสดงเครื่องหมายเสมอโดยไม่คำนึงถึงการทับซ้อน
  • REQUIRED_AND_HIDES_OPTIONAL: แสดงเครื่องหมายเสมอโดยไม่คำนึงถึง การทับซ้อน และซ่อนเครื่องหมาย OPTIONAL_AND_HIDES_LOWER_PRIORITY หรือ ป้ายกำกับที่ทับซ้อนกับเครื่องหมาย
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY: แสดงเครื่องหมายเฉพาะในกรณีที่เครื่องหมายไม่ทับซ้อนกับเครื่องหมายอื่นๆ หากเครื่องหมาย 2 รายการประเภทนี้ทับซ้อนกัน ระบบจะแสดงเครื่องหมายที่มี zIndex สูงกว่า หากมี zIndex เดียวกัน ระบบจะแสดง รายการที่มีตำแหน่งหน้าจอแนวตั้งต่ำกว่า

ตัวอย่างต่อไปนี้แสดงการตั้งค่าลักษณะการทำงานเมื่อเกิดการทับซ้อนสำหรับเครื่องหมาย

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

ควบคุมลักษณะการทำงานเมื่อป้ายกำกับทับซ้อนกัน

คุณควบคุมลักษณะการทำงานของการซ้อนทับของหมุดและข้อความป้ายกำกับของเครื่องหมาย แยกกันได้ ในบางกรณี การซ่อนป้ายกำกับขณะที่ ปล่อยให้หมุดเครื่องหมายปรากฏบนหน้าจออาจเป็นประโยชน์เพื่อรักษาบริบท โดยให้เพิ่มองค์ประกอบ <gmp-label-3d> เป็นองค์ประกอบร่วมของ <gmp-marker-3d> และลิงก์ องค์ประกอบทั้ง 2 โดยใช้แอตทริบิวต์ for

โค้ดตัวอย่างต่อไปนี้แสดงการตั้งค่าลักษณะการทำงานเมื่อป้ายกำกับทับซ้อนกัน แยกจากเครื่องหมาย

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);