การปรับแต่งเครื่องหมายพื้นฐาน

Markers API สำหรับ Maps 3 มิติใช้ 2 คลาสเพื่อกำหนดมาร์กเกอร์ ได้แก่ คลาส 3DMarkerElement มีพารามิเตอร์พื้นฐาน (position, label และ map) และคลาส PinElement มีตัวเลือกสำหรับการปรับแต่งเพิ่มเติม

หากต้องการเพิ่มมาร์กเกอร์ลงในแผนที่ คุณต้องโหลดไลบรารีมาร์กเกอร์ก่อน ซึ่งมีคลาส 3DMarkerElement และ PinElement

ข้อมูลโค้ดต่อไปนี้แสดงโค้ดเพื่อสร้าง PinElement ใหม่ แล้วนำไปใช้กับตัวทำเครื่องหมาย

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);
index.js

ในแผนที่ที่สร้างโดยใช้ HTML ระบบจะประกาศพารามิเตอร์พื้นฐานสำหรับมาร์กเกอร์โดยใช้องค์ประกอบ HTML gmp-marker-3d และการปรับแต่งใดๆ ที่ใช้คลาส PinElement จะต้องนำไปใช้โดยโปรแกรม หากต้องการทำเช่นนี้ โค้ดของคุณต้องดึงข้อมูลองค์ประกอบ gmp-marker-3d จากหน้า HTML ข้อมูลโค้ดต่อไปนี้แสดงโค้ดเพื่อค้นหาคอลเล็กชันขององค์ประกอบ gmp-marker-3d แล้ววนซ้ำผลลัพธ์เพื่อนำการปรับแต่งที่ประกาศไว้ใน gmp-marker-3d ไปใช้

// Return an array of markers.
const markers = [...document.querySelectorAll('gmp-marker-3d')];

// Loop through the markers
for (let i = 0; i < markers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  markers[i].appendChild(pin.element);
}

หน้านี้จะแสดงวิธีปรับแต่งมาร์กเกอร์ด้วยวิธีต่อไปนี้

• ปรับขนาดมาร์กเกอร์
• เปลี่ยนสีพื้นหลัง
• เปลี่ยนสีเส้นขอบ
• เปลี่ยนสีของรูปอักขระ
• เพิ่มข้อความลงในรูปอักขระ
• เปลี่ยนระดับความสูง
• นำมาร์กเกอร์ออก

ปรับขนาดมาร์กเกอร์

หากต้องการปรับขนาดมาร์กเกอร์ ให้ใช้ตัวเลือก scale ดังนี้

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);
index.js

เปลี่ยนสีพื้นหลัง

ใช้ตัวเลือก PinElement.background เพื่อเปลี่ยนสีพื้นหลังของตัวทำเครื่องหมาย ดังนี้

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});

const markerWithBackground = new Marker3DElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(pinBackground);
index.js

เปลี่ยนสีเส้นขอบ

ใช้ตัวเลือก PinElement.borderColor เพื่อเปลี่ยนสีเส้นขอบของมาร์กเกอร์ ดังนี้

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#FFFFFF',
});
const markerWithBorder = new Marker3DElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerWithBorder.append(pinBorder);
index.js

เปลี่ยนสีของรูปอักขระ

ใช้ตัวเลือก PinElement.glyphColor เพื่อเปลี่ยนสีของรูปอักขระของตัวทำเครื่องหมาย ดังนี้

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerWithGlyphColor = new Marker3DElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerWithGlyphColor.append(pinGlyph);
index.js

เพิ่มข้อความลงในภาพสัญลักษณ์

ใช้ตัวเลือก PinElement.glyph เพื่อแทนที่รูปอักขระเริ่มต้นด้วยอักขระข้อความ รูปอักขระข้อความของ PinElement จะปรับขนาดตาม PinElement และสีเริ่มต้นจะตรงกับ glyphColor เริ่มต้นของ PinElement

// Change many elements together and extrude marker.
const pinTextGlyph = new PinElement({
    background: '#F0F6FC',
    glyphText: 'E',
    glyphColor: 'red',
    borderColor: '#0000FF',
});
const markerWithGlyphText = new Marker3DElement({
    position: { lat: 37.415, lng: -122.015, altitude: 50 },
    extruded: true,
    altitudeMode: 'RELATIVE_TO_GROUND',
});
markerWithGlyphText.append(pinTextGlyph);
index.js

เปลี่ยนระดับความสูง

ใช้ตัวเลือก Marker3DElement.position.altitude ร่วมกับ Marker3DElement.altitudeMode และ Marker3DElement.extruded เพื่อเปลี่ยนระดับความสูงของตัวทำเครื่องหมายและเพิ่มเส้นที่ยื่นออกมาจากพื้นดินไปยังตัวทำเครื่องหมาย ดังนี้

// Change a marker's altitude and add an extrusion.
const extrudedMarker = new Marker3DElement({
    position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
    altitudeMode: 'RELATIVE_TO_GROUND',
    extruded: true,
});
index.js

นำมาร์กเกอร์ออก

ใช้ Marker3DElement.remove() เพื่อนำมาร์กเกอร์ออกจากแผนที่ ดังนี้

const marker = document.querySelector('gmp-marker-3d');
marker.remove();

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

• สร้างมาร์กเกอร์ด้วยกราฟิก