API Nhập thư viện động

API nhập thư viện động là một cách mới để tải API JavaScript cho Maps và tất cả các thư viện đi kèm với API đó. Khả năng tải thư viện một cách linh động trong thời gian chạy giúp bạn không phải lo lắng về các phần phụ thuộc nhiều thành phần, đồng thời cho phép tải thư viện dựa trên cam kết. Điều này cũng cho phép bạn tránh sử dụng không gian tên dài khi sử dụng API JavaScript cho Maps (không gian tên dài vẫn được điền sẵn và vẫn có thể sử dụng được).

Sử dụng tính năng Nhập thư viện động

Để sử dụng API Nhập thư viện động, hãy thêm một thẻ tập lệnh cho trình tải bootsrap nội tuyến vào trang HTML và mã thời gian chạy để gọi importLibrary() (bạn cũng có thể sử dụng trình tải tập lệnh đơn giản để thực hiện việc này; trong trường hợp này, mã ứng dụng của bạn phải đợi lệnh gọi lại trước khi sử dụng importLibrary). Sao chép mã sau, thêm khóa API của bạn và mọi thông số tự khởi động mà ứng dụng của bạn cần:

<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>

Để tải thư viện trong thời gian chạy, hãy sử dụng toán tử await để gọi importLibrary() từ trong một hàm không đồng bộ, như minh họa dưới đây:

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

Thông số bắt buộc

  • key: Khoá API của bạn. API JavaScript của Maps sẽ không tải trừ khi bạn chỉ định một khoá API hợp lệ.

  • v: "beta" Để xem trước, bạn phải chỉ định kênh beta.

Thông số tùy chọn

  • libraries: Danh sách được phân tách bằng dấu phẩy gồm các thư viện API JavaScript bổ sung để tải. Thông thường, bạn không nên chỉ định một nhóm thư viện cố định, nhưng nó dành cho các nhà phát triển muốn tinh chỉnh hành vi lưu vào bộ nhớ đệm trên trang web của họ. Xin lưu ý rằng mặc dù điều này có thể khiến tốc độ tải chậm hơn nếu cần thư viện không được chỉ định.

  • language: Ngôn ngữ cần sử dụng. Điều này ảnh hưởng đến tên của các chế độ điều khiển, thông báo bản quyền, đường lái xe và nhãn điều khiển cũng như phản hồi cho các yêu cầu dịch vụ. Hãy xem danh sách ngôn ngữ được hỗ trợ.

  • region: Mã khu vực cần sử dụng. Điều này sẽ thay đổi hành vi của bản đồ dựa trên một quốc gia hoặc lãnh thổ nhất định.

  • solutionChannel: Nền tảng Google Maps cung cấp nhiều loại mã mẫu để giúp bạn thiết lập và sử dụng nhanh chóng. Để theo dõi việc sử dụng mẫu mã phức tạp hơn và cải thiện chất lượng giải pháp, Google sẽ đưa tham số truy vấn solution_channel vào các lệnh gọi API trong mã mẫu của mình.

  • authReferrerPolicy: Khách hàng của Maps JS có thể định cấu hình các quy định hạn chế liên kết giới thiệu HTTP trong Cloud Console để giới hạn những URL được phép sử dụng khoá API cụ thể. Theo mặc định, các hạn chế này có thể được định cấu hình để chỉ cho phép một số đường dẫn sử dụng Khoá API. Nếu bất kỳ URL nào trên cùng một miền hoặc nguồn gốc đều có thể sử dụng Khoá API, bạn có thể đặt authReferrerPolicy: "origin" để giới hạn lượng dữ liệu được gửi khi cho phép các yêu cầu từ API Maps JavaScript. Khi thông số này được chỉ định và Hạn chế liên kết giới thiệu HTTP được bật trên Cloud Console, API JavaScript cho Maps sẽ chỉ có thể tải nếu có Hạn chế liên kết giới thiệu HTTP khớp với miền của trang web hiện tại mà không được chỉ định đường dẫn.