เครื่องหมาย

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

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

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

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

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

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

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

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

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

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

function initMap() {
  const map = new Map3DElement({
    center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
    tilt: 67.5,
    range: 45000,
    mode: MapMode.HYBRID
  });

  const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  interactiveMarker.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

กำหนดการดำเนินการสำหรับการซ้อนทับของเครื่องหมาย

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

const marker = new Marker3DElement({
    position: {lat, lng},
    collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});

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

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

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

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