סמנים מתקדמים משתמשים בשתי מחלקות כדי להגדיר סמנים:
המחלקה AdvancedMarkerElement
מספקת את הפרמטרים הבסיסיים (position
,
title
ו-map
), והמחלקה PinElement
מכילה אפשרויות להמשך
בהתאמה אישית. בקטע הבא מוצג הקוד שיוצר PinElement
חדש,
ואז להחיל אותו על סמן.
// Create a pin element.
const pin = new PinElement({
scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pin.element,
});
במפות שנוצרו באמצעות HTML, הפרמטרים הבסיסיים של סמן מוצהרים באמצעות
רכיב ה-HTML gmp-advanced-marker
; בכל התאמה אישית שמשתמשת
צריך להחיל את המחלקה PinElement
באופן פרוגרמטי. כדי לעשות זאת, הקוד
לאחזר את הרכיבים gmp-advanced-marker
מדף ה-HTML. הבאים
קטע הקוד מציג קוד לשאילתה על אוסף של רכיבי gmp-advanced-marker
,
לאחר מכן לחזור על התוצאות כדי להחיל את ההתאמה האישית שהוצהרה
PinElement
.
// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];
// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
const pin = new PinElement({
scale: 2.0,
});
marker.appendChild(pin.element);
}
הדף הזה מראה איך להתאים אישית את הסמנים בדרכים הבאות:
- הוספת טקסט לכותרת
- שינוי קנה המידה של הסמן
- שינוי צבע הרקע
- שינוי של צבע הגבול
- שינוי הצבע של הגליף
- הסתרת הגליף
הוספת טקסט של כותרת
טקסט הכותרת מופיע כאשר הסמן עובר מעל סמן. טקסט הכותרת קריא באמצעות קוראי מסך.
כדי להוסיף טקסט של כותרת באופן פרוגרמטי, צריך להשתמש ברכיב AdvancedMarkerElement.title
אפשרות:
// Default marker with title text (no PinElement). const markerViewWithText = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.03 }, title: "Title text for the marker at lat: 37.419, lng: -122.03", });
כדי להוסיף טקסט כותרת לסמן שנוצר באמצעות HTML, צריך להשתמש במאפיין title
:
<gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID" style="height: 400px" > <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA" ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" ></gmp-advanced-marker> </gmp-map>
שינוי קנה המידה של הסמן
כדי לשנות את קנה המידה של סמן, משתמשים באפשרות scale
.
TypeScript
// Adjust the scale. const pinScaled = new PinElement({ scale: 1.5, }); const markerViewScaled = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.02 }, content: pinScaled.element, });
JavaScript
// Adjust the scale. const pinScaled = new PinElement({ scale: 1.5, }); const markerViewScaled = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.02 }, content: pinScaled.element, });
שינוי צבע הרקע
שימוש באפשרות PinElement.background
כדי לשנות את צבע הרקע של סמן:
TypeScript
// Change the background color. const pinBackground = new PinElement({ background: '#FBBC04', }); const markerViewBackground = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.01 }, content: pinBackground.element, });
JavaScript
// Change the background color. const pinBackground = new PinElement({ background: "#FBBC04", }); const markerViewBackground = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.01 }, content: pinBackground.element, });
שינוי של צבע הגבולות
שימוש באפשרות PinElement.borderColor
כדי לשנות את צבע הגבול של
עט סימון:
TypeScript
// Change the border color. const pinBorder = new PinElement({ borderColor: '#137333', }); const markerViewBorder = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.03 }, content: pinBorder.element, });
JavaScript
// Change the border color. const pinBorder = new PinElement({ borderColor: "#137333", }); const markerViewBorder = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.03 }, content: pinBorder.element, });
שינוי צבע הגליף
יש להשתמש באפשרות PinElement.glyphColor
כדי לשנות את צבע הגליף של הסמן:
TypeScript
// Change the glyph color. const pinGlyph = new PinElement({ glyphColor: 'white', }); const markerViewGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.02 }, content: pinGlyph.element, });
JavaScript
// Change the glyph color. const pinGlyph = new PinElement({ glyphColor: "white", }); const markerViewGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.02 }, content: pinGlyph.element, });
הסתרת הגליף
כדי להסתיר את הגליף של הסמן, מגדירים את האפשרות PinElement.glyph
למחרוזת ריקה:
TypeScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: '', }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.01 }, content: pinNoGlyph.element, });
JavaScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: "", }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.01 }, content: pinNoGlyph.element, });
לחלופין, אפשר להגדיר את PinElement.glyphColor
לאותו ערך כמו PinElement.background
.
במצב כזה, המערכת מסתירה את הגליף מבחינה חזותית.