סמנים מתקדמים משתמשים בשתי מחלקות כדי להגדיר סמנים: המחלקה 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
:
TypeScript
// 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',
});
JavaScript
// 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
.
כך התוצאה של הסתרה חזותית של הגליף.
השלבים הבאים:
אלא אם צוין אחרת, התוכן של דף זה הוא ברישיון Creative Commons Attribution 4.0 ודוגמאות הקוד הן ברישיון Apache 2.0. לפרטים, ניתן לעיין במדיניות האתר Google Developers. Java הוא סימן מסחרי רשום של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2024-05-14 (שעון UTC).
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"חסרים לי מידע או פרטים"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"התוכן מורכב מדי או עם יותר מדי שלבים"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"התוכן לא עדכני"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"בעיה בתרגום"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"בעיה בדוגמאות/בקוד"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"סיבה אחרת"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"התוכן קל להבנה"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"התוכן עזר לי לפתור בעיה"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"סיבה אחרת"
}]