เครื่องหมาย

ใช้เครื่องหมายเพื่อดึงดูดความสนใจของผู้ใช้ไปยังตำแหน่งหนึ่งบนแผนที่ คู่มือนี้จะสาธิตวิธีใช้และปรับแต่งเครื่องหมายในแผนที่ 3 มิติ คุณสามารถควบคุมรูปร่าง ขนาด และสีของเครื่องหมาย รวมถึงความสูงที่เครื่องหมายจะปรากฏ ตัวอย่างต่อไปนี้แสดงเครื่องหมายพื้นฐาน

แผนที่ 3 มิติใน Maps JavaScript API มีคลาสเครื่องหมาย 2 คลาสที่แตกต่างกัน ซึ่งแต่ละคลาสได้รับการปรับให้เหมาะสมกับการใช้งานที่เฉพาะเจาะจง ตารางต่อไปนี้แสดงความแตกต่างและข้อดีข้อเสียระหว่างคลาสที่มีอยู่ 2 คลาส

ความสามารถ	MarkerElement	Marker3DElement
การปรับแต่ง	สูง (รองรับองค์ประกอบ HTML ที่กำหนดเอง, Core Animation API ฯลฯ)	ต่ำ (ปรับแต่งได้น้อยกว่า)
ประสิทธิภาพ	ประสิทธิภาพการโต้ตอบต่ำกว่า (FPS ลดลงเมื่อมีเครื่องหมายจำนวนมาก)	ประสิทธิภาพการโต้ตอบสูงกว่า (ปรับให้เหมาะสมกับการแสดงผลชุดข้อมูลขนาดใหญ่)
ความจุที่แนะนำ	ประสิทธิภาพการโต้ตอบที่เชื่อถือได้สำหรับเครื่องหมายประมาณ 1,000 รายการ	แนะนำให้ใช้จัดการเครื่องหมายมากกว่า 1,000 รายการ

ปรับแต่งสี สเกล และรูปภาพไอคอน

ปรับแต่งพื้นหลัง กลีฟ สีเส้นขอบ และขนาดของเครื่องหมายเริ่มต้น

แทนที่ไอคอนเครื่องหมายเริ่มต้นด้วยทรัพยากร SVG ที่กำหนดเอง

ตั้งค่าความสูงของเครื่องหมาย

คุณสามารถตั้งค่าความสูงของเครื่องหมายได้โดยการยืดเครื่องหมายและตั้งค่าความสูง

ทำให้เครื่องหมายตอบสนองต่อเหตุการณ์การคลิกและเหตุการณ์ของแป้นพิมพ์

ทำให้เครื่องหมายตอบสนองต่อการคลิกและเหตุการณ์ของแป้นพิมพ์โดยการเพิ่ม Listener เหตุการณ์ click

const interactiveMarker = new Marker3DInteractiveElement({
    position,
    gmpPopoverTargetElement: popover,
});
index.js

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

ระบุลักษณะการทำงานของเครื่องหมายเมื่อชนกับเครื่องหมายอื่นหรือป้ายกำกับแผนที่

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

ประสิทธิภาพของเครื่องหมาย

เครื่องหมาย HTML ที่กำหนดเอง (MarkerElement) มีประสิทธิภาพต่ำกว่า เครื่องหมาย 3 มิติมาตรฐาน (Marker3DElement) เราขอแนะนำอย่างยิ่งให้ใช้ Marker3dElement คลาสสำหรับแอปพลิเคชันที่มีเครื่องหมายมากกว่า 1,000 รายการ เพื่อให้มั่นใจว่าแอปพลิเคชันจะมีประสิทธิภาพสูงสุด

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

• เพิ่มเครื่องหมาย