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

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

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

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

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

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

ภาพหน้าจอแสดงเครื่องหมายที่กำหนดเอง

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

ภาพหน้าจอแสดงเครื่องหมาย SVG ที่กำหนดเอง

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

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

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

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

ทำให้เครื่องหมายตอบสนองต่อการคลิกและเหตุการณ์บนแป้นพิมพ์โดยการเพิ่ม 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 มิติ และระบุลักษณะการทำงานของเครื่องหมายเมื่อทับซ้อนกับ เครื่องหมายหรือป้ายกำกับแผนที่อื่น ความสูงของเครื่องหมายได้รับการสนับสนุนบนแผนที่เวกเตอร์เท่านั้น

ภาพหน้าจอแสดงเครื่องหมายที่ปรับระดับความสูงแล้ว

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