หน้านี้แสดงวิธีควบคุมเครื่องหมายขั้นสูงในด้านต่อไปนี้
- ตั้งค่าลักษณะการชนให้กับเครื่องหมาย
- ตั้งค่าระดับความสูงของเครื่องหมาย
- ควบคุมการแสดงเครื่องหมายตามระดับการซูมแผนที่
ตั้งค่าลักษณะการชนให้กับเครื่องหมาย
ลักษณะการชนจะควบคุมลักษณะที่เครื่องหมายจะแสดงหากเกิดการชน (ทับซ้อนกัน) ด้วยเครื่องหมายอื่น สนับสนุนการทำงานของการชนกันเฉพาะบนแผนที่เวกเตอร์เท่านั้น
หากต้องการตั้งค่าลักษณะการซ้อนทับ ให้ตั้งค่า AdvancedMarkerElement.collisionBehavior
เป็นค่าใดค่าหนึ่ง
ดังต่อไปนี้
REQUIRED
: (ค่าเริ่มต้น) แสดงเครื่องหมายเสมอไม่ว่าจะมีการชนกันหรือไม่ก็ตามOPTIONAL_AND_HIDES_LOWER_PRIORITY
แสดงเครื่องหมายเฉพาะในกรณีที่ไม่แสดง ซ้อนทับกับเครื่องหมายอื่นๆ หากเครื่องหมายสองเครื่องหมายประเภทนี้ทับซ้อนกัน เครื่องหมายหนึ่ง ที่มี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, });
JavaScript
const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, });
ตั้งค่าระดับความสูงของเครื่องหมาย
บนแผนที่เวกเตอร์ คุณสามารถตั้งค่าระดับความสูงที่เครื่องหมายจะปรากฏ นี่คือ
มีประโยชน์ในการทำให้เครื่องหมายปรากฏอย่างถูกต้องที่เกี่ยวข้องกับเนื้อหาแผนที่ 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, });
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 }, });
ควบคุมการแสดงเครื่องหมายตามระดับการซูมแผนที่
ดูเครื่องหมาย การเปลี่ยนแปลงการแสดงผล (เริ่มต้นโดยการย่อ):
หากต้องการควบคุมการมองเห็นเครื่องหมายขั้นสูง ให้สร้าง zoom_changed
Listener และเพิ่มฟังก์ชันแบบมีเงื่อนไขเพื่อตั้งค่า 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; } });
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; } });