js api loader

يقوم Google Maps JavaScript API Loader

وصف

قم بتحميل البرنامج النصي JavaScript API ديناميكيًا. يستلهم هذا من حزمة Google-Maps NPM ولكنه يقوم بتحديثها بـ ES6 والوعود و TypeScript.

ثَبَّتَ

متوفر عبر NPM مثل package @googlemaps/js-api-tloader.

npm i @googlemaps/js-api-loader

بدلاً من ذلك ، يمكنك إضافة حزمة UMD مباشرة إلى مستند HTML باستخدام رابط UNPKG.

 < script src =" https://unpkg.com/@googlemaps/[email protected]/dist/index.min.js " > </ script >

عند الإضافة عبر UNPKG ، يمكن الوصول إلى المحمل على google.maps.plugins.loader.Loader .

TypeScript

يحتاج مستخدمو Transcript إلى تثبيت حزمة الأنواع التالية.

npm i -D @types/google.maps

الوثائق

يمكن العثور على الوثائق المرجعية في هذا الرابط. تعتبر وثائق JavaScript API JavaScript هي المصدر الموثوق لخيارات المحمل.

مثال

 import { Loader } from '@googlemaps/js-api-loader' ;

const loader = new Loader ( {
  apiKey : "" ,
  version : "weekly" ,
  libraries : [ "places" ]
} ) ;

const mapOptions = {
  center : {
    lat : 0 ,
    lng : 0
  } ,
  zoom : 4
} ;

باستخدام وعد لمكتبة معينة.

 // Promise for a specific library
loader
  . importLibrary ( 'maps' )
  . then ( ( { Map } ) => {
    new Map ( document . getElementById ( "map" ) , mapOptions ) ;
  } )
  . catch ( ( e ) => {
    // do something
  } ) ;

باستخدام وعد عندما يتم تحميل البرنامج النصي.

 // Promise
loader
  . load ( )
  . then ( ( google ) => {
    new google . maps . Map ( document . getElementById ( "map" ) , mapOptions ) ;
  } )
  . catch ( e => {
    // do something
  } ) ;

بدلاً من ذلك ، إذا كنت ترغب في استخدام رد الاتصال.

 // Callback
loader . loadCallback ( e => {
  if ( e ) {
    console . log ( e ) ;
  } else {
    new google . maps . Map ( document . getElementById ( "map" ) , mapOptions ) ;
  }
} ) ;

عرض الحزمة في العمل هنا.

يدعم

هذه المكتبة مدعومة المجتمع. نحن مرتاحون بما فيه الكفاية مع استقرار وميزات المكتبة التي نريدك أن تبنيها على تطبيقات إنتاج حقيقية عليها.

إذا وجدت خطأ ، أو لديك اقتراح ميزة ، يرجى تسجيل مشكلة. إذا كنت ترغب في المساهمة ، فيرجى قراءة كيفية المساهمة.