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

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

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

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

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

ปรับแต่งสีพื้นหลัง สัญลักษณ์ และเส้นขอบของเครื่องหมายเริ่มต้น รวมถึงปรับขนาดเครื่องหมาย

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

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

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

สร้างเครื่องหมาย HTML ที่กําหนดเอง

ใช้ HTML และ CSS ที่กําหนดเองเพื่อสร้างเครื่องหมายอินเทอร์แอกทีฟที่โดดเด่น และสร้างภาพเคลื่อนไหว

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

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

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

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

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

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