ספריות

כדי לטעון את קוד ה-JavaScript של API JavaScript של מפות Google, יש צורך כוללים בדף סקריפט טעינה של bootrap, בפורמט הבא:

<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",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

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

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

const { Map } = await google.maps.importLibrary("maps");

בדוגמת הקוד הבאה מוצגת טעינה גם של הספריות Map וגם של הספריות AdvancedMarkerElement:

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

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

הספריות הבאות זמינות לשימוש עם ייבוא של ספרייה דינמית:

ספריות לכתובת URL ב-bootrap (מדור קודם)

הספריות הבאות נתמכות לשימוש עם תג סקריפט bootrap מדור קודם:
  • ב-drawing יש ממשק גרפי שהמשתמשים יכולים לצייר פוליגונים, מלבנים, קווים פוליגוניים, מעגלים וסמנים במפה. ייעוץ ה שרטוט תיעוד וספרייה לקבלת מידע נוסף.
  • geometry כולל פונקציות שימושיות לחישוב ערכים גיאומטריים סקלריים (כמו מרחק ושטח) על פני השטח של כדור הארץ. נכנסים ל- גיאומטריה תיעוד וספרייה לקבלת מידע נוסף.
  • journeySharing מספק תמיכה בפלטפורמה של מפות Google תחבורה ופתרונות לוגיסטיקה.
  • localContext מציג למשתמשים מוקדי עניין עיקריים ליד מיקום שציינתם. נכנסים ל- הקשר מקומי תיעוד וספרייה לקבלת מידע נוסף.
  • בעזרת marker אפשר להוסיף סמנים מתקדמים עם ביצועים גבוהים ומותאמים אישית מפות. מידע נוסף זמין במסמכי התיעוד בנושא סמנים מתקדמים. אפשר לקבל מידע נוסף.
  • places מאפשר לאפליקציה לחפש מקומות כמו כמו מוסדות, מיקומים גיאוגרפיים או נקודות עניין בולטות, בתוך אזור מוגדר. נכנסים ל- ספריית מקומות תיעוד למידע נוסף.
  • visualization מספק מפות חום לייצוג חזותי של . נכנסים ל- המחשה תיעוד וספרייה לקבלת מידע נוסף.

בקשת האתחול הבאה מדגימה איך להוסיף בקשה עבור ספרייה אחת (google.maps.geometry) של Maps JavaScript API, לגרסה הקודמת סקריפט לטעינת אתחול:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry&callback=initMap">
</script>

כדי לבקש כמה ספריות, צריך להפריד ביניהן באמצעות פסיק:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry,places&callback=initMap">
</script>