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

เลือกแพลตฟอร์ม: 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 }),
    collisionBehavior: collisionBehavior,
});
mapElement.appendChild(advancedMarker);
index.ts

JavaScript

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

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

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

TypeScript

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

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

mapElement.append(marker);
index.ts

JavaScript

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

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

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

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

TypeScript

mapElement.innerMap.addListener('zoom_changed', () => {
    let zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom! > minZoom ? position : null;
    }
});
index.ts

JavaScript

mapElement.innerMap.addListener('zoom_changed', () => {
    let zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom > minZoom ? position : null;
    }
});
index.js

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

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