סמנים מתקדמים משתמשים בשתי מחלקות כדי להגדיר סמנים:
המחלקה 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);
}
הדף הזה מראה איך להתאים אישית את הסמנים בדרכים הבאות:
- הוספת טקסט לכותרת
- שינוי קנה המידה של הסמן
- שינוי צבע הרקע
- שינוי של צבע הגבול
- שינוי הצבע של הגליף
- הסתרת הגליף
![תרשים שבו מוצגים החלקים של עט סימון מתקדם.](https://developers.google.cn/static/maps/documentation/javascript/advanced-markers/images/marker_parts.png?authuser=0000&hl=he)
הוספת טקסט של כותרת
טקסט הכותרת מופיע כאשר הסמן עובר מעל סמן. טקסט הכותרת קריא באמצעות קוראי מסך.
כדי להוסיף טקסט של כותרת באופן פרוגרמטי, צריך להשתמש ברכיב 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
.
במצב כזה, המערכת מסתירה את הגליף מבחינה חזותית.