ממשק API של ייבוא ספריות דינמי

ממשק ה-API של ייבוא ספריות דינמי הוא דרך חדשה לטעון את ממשק ה-API של מפות JavaScript ואת כל הספריות שנכללות בו. היכולת לטעון באופן דינמי ספריות בזמן ריצה פוטרת מכם את האפשרות של תלות בין רכיבים, ומאפשרת טעינה מבוססת הבטחה על ספריות. הוא גם מאפשר להימנע ממרחבי שמות ארוכים כשאתם משתמשים ב-JavaScript JavaScript API (מרחבי שמות ארוכים עדיין מאוכלסים, ועדיין אפשר להשתמש בהם).

שימוש בייבוא של ספרייה דינמית

כדי להשתמש ב-Directory Import API API, יש להוסיף לדף ה-HTML תג סקריפט עבור רכיב ה-אתחול אותה, כדי להוסיף קוד לקוד ה-API, כדי להפעיל את הפקודה importLibrary() (במקרה כזה אפשר גם להשתמש בכלי לטעינת סקריפטים פשוטים. במקרה כזה, קוד האפליקציה צריך להמתין לקריאה החוזרת (callback) לפני השימוש ב-importLibrary). עליכם להעתיק את הקוד הבא, להוסיף את מפתח ה-API שלכם ואת כל הפרמטרים של תוכנת האתחול הנדרשים לאפליקציה:

<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: "YOUR_API_KEY_HERE",
  v: "beta",
  // Add other bootstrap parameters as needed, using camel case.
});
</script>

כדי לטעון ספריות בזמן ריצה, יש להשתמש באופרטור await כדי לקרוא ל-importLibrary() מתוך פונקציה אסינכרונית, כפי שמתואר כאן:

let map;

async function initMap() {
    // Create the map.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
    map = new Map(document.getElementById("map"),{
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: 'DEMO_MAP_ID',
    });

    // Add an info window.
    const infoWindow = new InfoWindow({
        ariaLabel: "Googleplex",
    });

    // Add a marker.
    const {AdvancedMarkerView} = await google.maps.importLibrary("marker");
    const markerView = new AdvancedMarkerView({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: 'Googleplex, Mountain View CA'
    });

    markerView.addListener('click', () => {
        infoWindow.close();
        infoWindow.setContent('<b>Googleplex</b>, Mountain View CA');
        infoWindow.open(markerView.map, markerView);
    });
}

initMap();

פרמטרים נדרשים

  • key: מפתח API. ממשק ה-API של JavaScript JavaScript לא ייטען, אלא אם צוין מפתח API חוקי.

  • v: "beta" לתצוגה מקדימה, צריך לציין את ערוץ הבטא.

פרמטרים אופציונליים

  • libraries: רשימה מופרדת בפסיקים של ספריות נוספות של JavaScript API ב'מפות'. בדרך כלל לא מומלץ לציין קבוצת ספריות קבועה, אבל היא זמינה למפתחים שרוצים לשפר את התנהגות השמירה במטמון באתר שלהם. עם זאת, חשוב לציין שיכול להיות שהטעינה תהיה איטית יותר אם יש צורך בספרייה שלא מצוין.

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

  • region: קוד האזור שבו יש להשתמש. הפעולה הזו משנה את ההתנהגות של המפה בהתאם למדינה או לאזור ספציפיים.

  • solutionChannel: פלטפורמת מפות Google מספקת סוגים רבים של קוד לדוגמה כדי לעזור לכם להתחיל במהירות. כדי לעקוב אחר השימוש בדוגמאות מורכבות יותר של קודים ולשפר את איכות הפתרון, Google כוללת בקוד המעקב שלנו את פרמטר השאילתה solution_channel בקריאות ל-API.

  • authReferrerPolicy: לקוחות JS של מפות Google יכולים להגדיר הגבלות על הפניות HTTP ב-Cloud Console, כדי להגביל את כתובות ה-URL שיכולות להשתמש במפתח API ספציפי. ניתן להגדיר את המגבלות האלה כברירת מחדל כך שרק נתיבים מסוימים יוכלו להשתמש במפתח API. אם כתובת URL כלשהי באותו דומיין או מקור עשויה להשתמש במפתח ה-API, ניתן להגדיר את authReferrerPolicy: "origin" כדי להגביל את כמות הנתונים שיישלחו בהרשאה של בקשות מ-Maps JavaScript API. אם הפרמטר הזה צוין והגבלות על הגורם המפנה של HTTP מופעלות ב-Cloud Console, ה-API של מפות Google ל-JavaScript יוכל להיטען רק אם יש הגבלה על הגורם המפנה של HTTP שתואם לדומיין הנוכחי של האתר, בלי שצוין נתיב.