واجهة برمجة التطبيقات لاستيراد المكتبة الديناميكية

تُعد "واجهة برمجة التطبيقات لاستيراد المكتبة الديناميكية" طريقة جديدة لتحميل واجهة برمجة تطبيقات JavaScript للخرائط وجميع المكتبات المتوافقة معها. إن توفر إمكانية تحميل المكتبات ديناميكيًا في وقت التشغيل يوفر عليك عناء القلق بشأن التبعيات عبر المكونات، كما يتيح تحميل المكتبات استنادًا إلى الوعد. ويتيح لك ذلك أيضًا تجنب استخدام مساحات الأسماء الطويلة عند استخدام واجهة برمجة تطبيقات JavaScript للخرائط (لا تزال مساحات الأسماء الطويلة تتم تعبئتها ولا يزال من الممكن استخدامها).

استخدام استيراد المكتبة الديناميكية

لاستخدام واجهة برمجة التطبيقات لاستيراد المكتبة الديناميكية، أضف علامة نص برمجي لأداة تحميل التشغيل المبدئي المضمّنة إلى صفحة HTML ورمز وقت التشغيل لاستدعاء importLibrary() (يمكنك أيضًا استخدام برنامج تحميل النص البرمجي البسيط لإجراء ذلك، وفي هذه الحالة، يجب أن ينتظر رمز التطبيق معاودة الاتصال قبل استخدام importLibrary). انسخ الرمز التالي، وأضف مفتاح واجهة برمجة التطبيقات، وأي معلمات بدء تشغيل يحتاج إليها تطبيقك:

<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: مفتاح واجهة برمجة التطبيقات لن يتم تحميل واجهة برمجة تطبيقات JavaScript للخرائط ما لم يتم تحديد مفتاح واجهة برمجة تطبيقات صالح.

• v: "beta" للمعاينة، عليك تحديد القناة التجريبية.

المعلمات الاختيارية

• libraries: قائمة مفصولة بفواصل تتضمن المكتبات الإضافية لواجهة برمجة تطبيقات JavaScript المطلوب تحميلها لا يُوصى بتحديد مجموعة ثابتة من المكتبات بشكل عام، ولكنه متاح لمطوّري البرامج الذين يرغبون في ضبط سلوك التخزين المؤقت على مواقعهم الإلكترونية. ولكن تجدر الإشارة إلى أن هذا يمكن أن يتسبب في بطء التحميل إذا كانت هناك حاجة إلى مكتبة لم يتم تحديدها.

• language: The language المراد استخدامها. ويؤثر هذا في أسماء عناصر التحكم، وإشعارات حقوق الطبع والنشر، واتجاهات القيادة، وتصنيفات عناصر التحكم، والردود على طلبات الخدمة. اطّلع على قائمة اللغات المدعومة.

• region: رمز المنطقة المطلوب استخدامه. يؤدي هذا إلى تغيير سلوك الخريطة استنادًا إلى بلد أو إقليم معين.

• solutionChannel: يوفّر Google Maps Platform أنواعًا عديدة من نماذج الرموز البرمجية لمساعدتك في تنفيذ الخطوات الأولى بسرعة. لتتبع استخدام نماذج الرموز الأكثر تعقيدًا وتحسين جودة الحلول، تُدرج Google معلمة طلب البحث solution_channel في طلبات البيانات من واجهة برمجة التطبيقات في نموذج التعليمات البرمجية.

• authReferrerPolicy: يمكن لعملاء JavaScript JS ضبط قيود مُحيل HTTP في Cloud Console لتحديد عناوين URL المسموح لها باستخدام مفتاح واجهة برمجة تطبيقات معيّن. بشكل افتراضي، يمكن تهيئة هذه القيود للسماح لمسارات معينة فقط باستخدام مفتاح واجهة برمجة التطبيقات. إذا كان أي عنوان URL على النطاق أو الأصل نفسه قد يستخدم مفتاح واجهة برمجة التطبيقات، يمكنك ضبط authReferrerPolicy: "origin" للحدّ من كمية البيانات المرسَلة عند تفويض الطلبات من واجهة برمجة تطبيقات JavaScript للخرائط. عند تحديد هذه المعلمة وتفعيل قيود مُحيل HTTP على Cloud Console، لن تتمكن من تحميل واجهة برمجة تطبيقات JavaScript للخرائط إلا في حالة وجود تقييد مُحيل HTTP يطابق نطاق موقع الويب الحالي بدون مسار محدد.