ควบคุมลักษณะการชน ความสูง และระดับการมองเห็น

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

หน้านี้จะแสดงวิธีควบคุมแต้มขั้นสูงในด้านต่อไปนี้

  • ตั้งค่าลักษณะการชนกันของเครื่องหมาย
  • กำหนดระดับความสูงของเครื่องหมาย
  • ควบคุมระดับการมองเห็นเครื่องหมายตามระดับการซูมแผนที่

ตั้งค่าลักษณะการชนกันของเครื่องหมาย

ลักษณะการชนกันจะควบคุมลักษณะที่เครื่องหมายจะแสดงหากชนกัน (ซ้อนทับกัน) กับเครื่องหมายอื่น ระบบรองรับลักษณะการชนในแผนที่เวกเตอร์เท่านั้น

หากต้องการตั้งค่าลักษณะการชน ให้ตั้งค่า AdvancedMarkerElement.collisionBehavior เป็นค่าใดค่าหนึ่งต่อไปนี้

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

ตัวอย่างต่อไปนี้แสดงการตั้งค่าลักษณะการชนกันของหมุด

TypeScript

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.ts

JavaScript

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});

index.js

กำหนดระดับความสูงของเครื่องหมาย

ในแผนที่เวกเตอร์ คุณสามารถตั้งค่าระดับความสูงที่เครื่องหมายจะปรากฏ ซึ่งมีประโยชน์ในการทําให้เครื่องหมายปรากฏอย่างถูกต้องเมื่อเทียบกับเนื้อหาแผนที่ 3 มิติ หากต้องการกำหนดระดับความสูงของเครื่องหมาย ให้ระบุ LatLngAltitude เป็นค่าสำหรับตัวเลือก MarkerView.position ดังนี้

TypeScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const markerView = new AdvancedMarkerElement({
    map,
    content: pin.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral,
});
index.ts

JavaScript

const pin = new PinElement({
  background: "#4b2e83",
  borderColor: "#b7a57a",
  glyphColor: "#b7a57a",
  scale: 2.0,
});
const markerView = new AdvancedMarkerElement({
  map,
  content: pin.element,
  // Set altitude to 20 meters above the ground.
  position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});
index.js

ควบคุมระดับการมองเห็นเครื่องหมายตามระดับการซูมแผนที่

ดูการเปลี่ยนแปลงการแสดงผลของเครื่องหมาย (เริ่มด้วยการซูมออก)

หากต้องการควบคุมระดับการมองเห็นของเครื่องหมายขั้นสูง ให้สร้างzoom_changed ฟังก์ชันการเรียกฟัง และเพิ่มฟังก์ชันแบบมีเงื่อนไขเพื่อตั้งค่า AdvancedMarkerElement.map เป็น null หากการซูมเกินระดับที่ระบุ ดังที่แสดงในตัวอย่างต่อไปนี้

TypeScript

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        marker01.map = zoom > 14 ? map : null;
        marker02.map = zoom > 15 ? map : null;
        marker03.map = zoom > 16 ? map : null;
        marker04.map = zoom > 17 ? map : null;
    }
});
index.ts

JavaScript

map.addListener("zoom_changed", () => {
  const zoom = map.getZoom();

  if (zoom) {
    // Only show each marker above a certain zoom level.
    marker01.map = zoom > 14 ? map : null;
    marker02.map = zoom > 15 ? map : null;
    marker03.map = zoom > 16 ? map : null;
    marker04.map = zoom > 17 ? map : null;
  }
});
index.js

ขั้นตอนถัดไป

ทําให้เครื่องหมายคลิกได้และเข้าถึงได้