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

‫Markers API for 3D Maps משתמש בשתי מחלקות כדי להגדיר סמנים: המחלקה 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();

השלבים הבאים

• יצירת סמנים עם גרפיקה