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

בחירת פלטפורמה: Android iOS JavaScript

סמנים מתקדמים משתמשים בשתי מחלקות כדי להגדיר סמנים: המחלקה 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);
}

הדף הזה מראה איך להתאים אישית את הסמנים בדרכים הבאות:

• הוספת טקסט לכותרת
• שינוי קנה המידה של הסמן
• שינוי צבע הרקע
• שינוי של צבע הגבול
• שינוי הצבע של הגליף
• הסתרת הגליף

איור 1: החלקים של עט סימון מתקדם.

הוספת טקסט של כותרת

טקסט הכותרת מופיע כאשר הסמן עובר מעל סמן. קוראי מסך יכולים לקרוא את טקסט הכותרת.

כדי להוסיף טקסט של כותרת באופן פרוגרמטי, משתמשים באפשרות 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',
});
index.ts
    

      הערה: קראו את המדריך לשימוש ב-TypeScript ובמפות Google.
    
    
    

    
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",
});
index.js
    


כדי להוסיף טקסט כותרת לסמן שנוצר באמצעות 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>
index.html

שינוי קנה המידה של הסמן

כדי לשנות את קנה המידה של סמן, משתמשים באפשרות 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,
});
index.ts
    

      הערה: קראו את המדריך לשימוש ב-TypeScript ובמפות Google.
    
    
    

    
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,
});
index.js
    


שינוי צבע הרקע

שימוש באפשרות 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,
});
index.ts
    

      הערה: קראו את המדריך לשימוש ב-TypeScript ובמפות Google.
    
    
    

    
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,
});
index.js
    


שינוי של צבע הגבולות

משתמשים באפשרות 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,
});
index.ts
    

      הערה: קראו את המדריך לשימוש ב-TypeScript ובמפות Google.
    
    
    

    
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,
});
index.js
    


שינוי צבע הגליף

יש להשתמש באפשרות 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,
});
index.ts
    

      הערה: קראו את המדריך לשימוש ב-TypeScript ובמפות Google.
    
    
    

    
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,
});
index.js
    


הסתרת הגליף

כדי להסתיר את הגליף של הסמן, מגדירים את האפשרות 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,
});
index.ts
    

      הערה: קראו את המדריך לשימוש ב-TypeScript ובמפות Google.
    
    
    

    
JavaScript
      
  
  
  
 
// Hide the glyph.
const pinNoGlyph = new PinElement({
  glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.01 },
  content: pinNoGlyph.element,
});
index.js
    


לחלופין, אפשר להגדיר את PinElement.glyphColor לאותו ערך כמו PinElement.background.
במצב כזה, המערכת מסתירה את הגליף מבחינה חזותית.

השלבים הבאים:


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