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

เลือกแพลตฟอร์ม: 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> และลิงก์โดยใช้แอตทริบิวต์ 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);