ภาพรวมเครื่องหมาย

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

ใช้เครื่องหมายเพื่อแสดงสถานที่แห่งเดียวบนแผนที่ คู่มือนี้แสดงวิธี ให้ใช้เครื่องหมายขั้นสูง ด้วย เครื่องหมายขั้นสูงที่คุณสามารถสร้างและปรับแต่งได้ ตัวทำเครื่องหมายประสิทธิภาพ และสร้างเครื่องหมายที่เข้าถึงได้ ซึ่งตอบสนองต่อเหตุการณ์การคลิก DOM และการป้อนข้อมูลด้วยแป้นพิมพ์ เพื่อการปรับแต่งที่ละเอียดยิ่งขึ้น ตัวทำเครื่องหมายขั้นสูงรองรับการใช้ HTML และ CSS ที่กำหนดเอง รวมถึงความสามารถในการสร้าง เครื่องหมายที่กำหนดเองทั้งหมด สำหรับแอปพลิเคชัน 3 มิติ คุณสามารถควบคุมระดับความสูงที่เครื่องหมายจะปรากฏได้ เครื่องหมายขั้นสูงได้รับการสนับสนุนทั้งในแผนที่แรสเตอร์และแผนที่เวกเตอร์ (แต่คุณลักษณะบางอย่างจะใช้ไม่ได้ในแผนที่แรสเตอร์) คุณต้องมีรหัสแผนที่จึงจะใช้เครื่องหมายขั้นสูงได้ (ใช้ DEMO_MAP_ID ได้)

เคล็ดลับ: หากแผนที่ใช้เครื่องหมายเดิม พิจารณาย้ายข้อมูลไปยังเครื่องหมายขั้นสูง

เริ่มต้นใช้งานเครื่องหมายขั้นสูง

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

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

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

สร้างตัวทำเครื่องหมาย HTML ที่กำหนดเอง

ใช้ HTML และ CSS ที่กำหนดเองเพื่อสร้างรูปลักษณ์ที่โดดเด่น ตัวทำเครื่องหมายแบบอินเทอร์แอกทีฟ และสร้างภาพเคลื่อนไหวได้

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

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

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.4239163, lng: -122.0947209},
    zoom: 17,
    mapId: 'DEMO_MAP_ID',
  });

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

  marker.addListener('click', ({domEvent, latLng}) => {
    const {target} = domEvent;
    // Handle the click event.
    // ...
  });
}

ตั้งค่าระดับความสูงของเครื่องหมายและลักษณะการชน

ตั้งค่าระดับความสูงสำหรับเครื่องหมายเพื่อให้แสดงอย่างถูกต้อง องค์ประกอบต่างๆ ของแผนที่ 3 มิติ และระบุลักษณะการทำงานของเครื่องหมายเมื่อทับซ้อนกับ เครื่องหมายหรือป้ายกำกับแผนที่อื่น ความสูงของเครื่องหมายได้รับการสนับสนุนบนแผนที่เวกเตอร์เท่านั้น

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

• เริ่มต้นใช้งานเครื่องหมายขั้นสูง