js api loader

Google Maps JavaScript API Loader

คำอธิบาย

โหลดสคริปต์ Google Maps JavaScript API แบบไดนามิก สิ่งนี้ใช้แรงบันดาลใจจากแพ็คเกจ Google-Maps NPM แต่อัปเดตด้วย ES6 สัญญาและ TypeScript

ติดตั้ง

มีให้ผ่าน NPM เป็นแพ็คเกจ @googlemaps/js-api-loader

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 จำเป็นต้องติดตั้งแพ็คเกจประเภทต่อไปนี้

npm i -D @types/google.maps

เอกสาร

เอกสารอ้างอิงสามารถพบได้ที่ลิงค์นี้ เอกสาร Google Maps JavaScript API เป็นแหล่งข้อมูลที่เชื่อถือได้สำหรับตัวเลือกตัวโหลด

ตัวอย่าง

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

ดูแพ็คเกจที่ดำเนินการที่นี่

สนับสนุน

ห้องสมุดนี้ได้รับการสนับสนุนชุมชน เราสะดวกสบายพอด้วยความมั่นคงและคุณสมบัติของห้องสมุดที่เราต้องการให้คุณสร้างแอปพลิเคชันการผลิตจริง

หากคุณพบข้อผิดพลาดหรือมีข้อเสนอแนะคุณสมบัติโปรดบันทึกปัญหา หากคุณต้องการมีส่วนร่วมโปรดอ่านวิธีการมีส่วนร่วม