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

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

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

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

const pinScaled = new PinElement({
  scale: 1.5,
});

const markerWithLabel = new Marker3DElement({
  position: { lat: 37.419, lng: -122.03 },
  label: 'Simple label'
});

ในแผนที่ที่สร้างโดยใช้ HTML ระบบจะประกาศพารามิเตอร์พื้นฐานสำหรับเครื่องหมายโดยใช้องค์ประกอบ gmp-marker-3d HTML การปรับแต่งที่ใช้คลาส 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 markerScaled = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
});

markerScaled.appendChild(pinScaled);

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

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

// Change the background color.
const pinBackground = new PinElement({
  background: '#FBBC04',
});
const markerBackground = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
});

markerBackground.appendChild(pinBackground);

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

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

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerBorder = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.035 },
});

markerBorder.appendChild(pinBorder);

เปลี่ยนสีสัญลักษณ์

ใช้ตัวเลือก PinElement.glyphColor เพื่อเปลี่ยนสีสัญลักษณ์ของเครื่องหมาย

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerGlyph = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.025 },
});

markerGlyph.appendChild(pinGlyph);

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

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

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerGlyphText = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
});

markerGlyphText.appendChild(pinTextGlyph);

เปลี่ยนความสูง

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

const marker = new Marker3DElement({
  position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
  altitudeMode: 'RELATIVE_TO_GROUND',
  extruded: true,
});

นำเครื่องหมายออก

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

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

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