התאמה אישית בסיסית של סמן

כדי להגדיר סמנים תלת-ממדיים, נעשה שימוש בשתי כיתות: הכיתה 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, הפרמטרים הבסיסיים של סמן מוצהרים באמצעות רכיב ה-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 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();

השלבים הבאים