דף זה תורגם על ידי Cloud Translation API.

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

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

הצגת קוד המקור המלא לדוגמה

בדוגמה הזו מוצגות דרכים להתאמה אישית של סמנים: הוספת טקסט של כותרת, שינוי קנה המידה של הסמן, שינוי צבע הרקע, שינוי צבע הגבול, שינוי צבע הגליף והסתרת הגליף.

TypeScript

const parser = new DOMParser();

async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    const map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: 37.419, lng: -122.02 },
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

    // Each PinElement is paired with a MarkerView to demonstrate setting each parameter.

    // 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',
    });

    // 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,
    });

    // 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,
    });

    // Change the border color.
    const pinBorder = new PinElement({
        borderColor: '#137333',
    });
    const markerViewBorder = new AdvancedMarkerElement({
        map,
        position: { lat: 37.415, lng: -122.035 },
        content: pinBorder.element,
    });

    // Change the glyph color.
    const pinGlyph = new PinElement({
        glyphColor: 'white',
    });
    const markerViewGlyph = new AdvancedMarkerElement({
        map,
        position: { lat: 37.415, lng: -122.025 },
        content: pinGlyph.element,
    });

    const pinTextGlyph = new PinElement({
        glyph: 'T',
        glyphColor: 'white',
    });
    const markerViewGlyphText = new AdvancedMarkerElement({
        map,
        position: { lat: 37.415, lng: -122.015 },
        content: pinTextGlyph.element,
    });

    // Hide the glyph.
    const pinNoGlyph = new PinElement({
        glyph: '',
    });
    const markerViewNoGlyph = new AdvancedMarkerElement({
        map,
        position: { lat: 37.415, lng: -122.005 },
        content: pinNoGlyph.element,
    });

}

initMap();index.ts

JavaScript

const parser = new DOMParser();
async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
    const map = new Map(document.getElementById('map'), {
        center: { lat: 37.419, lng: -122.02 },
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });
    // Each PinElement is paired with a MarkerView to demonstrate setting each parameter.
    // 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',
    });
    // 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,
    });
    // 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,
    });
    // Change the border color.
    const pinBorder = new PinElement({
        borderColor: '#137333',
    });
    const markerViewBorder = new AdvancedMarkerElement({
        map,
        position: { lat: 37.415, lng: -122.035 },
        content: pinBorder.element,
    });
    // Change the glyph color.
    const pinGlyph = new PinElement({
        glyphColor: 'white',
    });
    const markerViewGlyph = new AdvancedMarkerElement({
        map,
        position: { lat: 37.415, lng: -122.025 },
        content: pinGlyph.element,
    });
    const pinTextGlyph = new PinElement({
        glyph: 'T',
        glyphColor: 'white',
    });
    const markerViewGlyphText = new AdvancedMarkerElement({
        map,
        position: { lat: 37.415, lng: -122.015 },
        content: pinTextGlyph.element,
    });
    // Hide the glyph.
    const pinNoGlyph = new PinElement({
        glyph: '',
    });
    const markerViewNoGlyph = new AdvancedMarkerElement({
        map,
        position: { lat: 37.415, lng: -122.005 },
        content: pinNoGlyph.element,
    });
}
initMap();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
  <head>
    <title>Advanced Marker Basic Customization</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>index.html

לניסיון

JSFiddle.net

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

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

בסמנים מתקדמים נעשה שימוש בשתי מחלקות להגדרת סמנים: המחלקה AdvancedMarkerElement מספקת את הפרמטרים הבסיסיים (position,‏ title ו-map), והמחלקה PinElement מכילה אפשרויות להתאמה אישית נוספת.

כדי להוסיף סמנים למפה, קודם צריך לטעון את ספריית marker שמספקת את המחלקות AdvancedMarkerElement ו-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',
});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

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

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.035 },
    content: pinBorder.element,
});index.ts

JavaScript

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.035 },
    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.025 },
    content: pinGlyph.element,
});index.ts

JavaScript

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.025 },
    content: pinGlyph.element,
});index.js

הוספת טקסט לגליף

משתמשים באפשרות PinElement.glyph כדי להחליף את הגליף שמוגדר כברירת מחדל בתו טקסט. הגליף של הטקסט PinElement משתנה בהתאם לPinElement והצבע שלו כברירת מחדל תואם לglyphColor כברירת מחדל של PinElement.

TypeScript

‫

const pinTextGlyph = new PinElement({
    glyph: 'T',
    glyphColor: 'white',
});
const markerViewGlyphText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.015 },
    content: pinTextGlyph.element,
});index.ts

JavaScript

const pinTextGlyph = new PinElement({
    glyph: 'T',
    glyphColor: 'white',
});
const markerViewGlyphText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.015 },
    content: pinTextGlyph.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.005 },
    content: pinNoGlyph.element,
});index.ts

JavaScript

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

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

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

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

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

הצגת קוד המקור המלא לדוגמה

TypeScript

JavaScript

CSS

HTML

לניסיון

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

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

TypeScript

JavaScript

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

TypeScript

JavaScript

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

TypeScript

JavaScript

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

TypeScript

JavaScript

הוספת טקסט לגליף

TypeScript

JavaScript

הסתרת הגליף

TypeScript

JavaScript

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

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