Interfejs Dynamic Import API

Interfejs Dynamic Import Import API to nowy sposób wczytywania interfejsu Maps JavaScript API oraz wszystkie powiązane z nim biblioteki. Dzięki możliwości dynamicznego wczytywania bibliotek w czasie działania nie musisz się martwić zależnościami między komponentami i możesz wczytywać na podstawie obietnic. Pozwala też unikać korzystania z długich przestrzeni nazw podczas korzystania z interfejsu Maps JavaScript API (długie przestrzenie nazw są nadal wypełniane i nadal można ich używać).

Użyj importowania biblioteki dynamicznej

Aby korzystać z interfejsu Dynamic Library Import API, dodaj do strony HTML tag skryptu wbudowanego programu rozruchowego oraz kod środowiska wykonawczego, aby wywołać importLibrary() (w tym przypadku możesz też użyć prostego tagu wczytującego). W takim przypadku kod aplikacji musi poczekać na wywołanie zwrotne, zanim użyjesz importLibrary. Skopiuj ten kod, dodaj klucz interfejsu API oraz wszelkie parametry rozruchowe aplikacji:

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

Aby wczytywać biblioteki w czasie działania, użyj operatora await do wywołania importLibrary() z funkcji asynchronicznej, jak pokazano tutaj:

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

Wymagane parametry

  • key: klucz interfejsu API. Interfejs Maps JavaScript API nie zostanie wczytany, chyba że określisz prawidłowy klucz interfejsu API.

  • v: "beta" Na potrzeby podglądu musisz określić kanał beta.

Parametry opcjonalne

  • libraries: rozdzielona przecinkami lista dodatkowych bibliotek interfejsu Maps JavaScript API. Określanie stałego zestawu bibliotek nie jest ogólnie zalecane, ale jest dostępne dla deweloperów, którzy chcą precyzyjnie dostosować sposób buforowania w witrynie. Warto jednak zauważyć, że jeśli nie określono biblioteki, może to spowalniać wczytywanie strony.

  • language: używany język. Ma to wpływ na nazwy elementów sterujących, informacji o prawach autorskich, wskazówek dojazdu i etykiet kontrolnych oraz na odpowiedzi na żądania usługi. Zobacz listę obsługiwanych języków.

  • region: kod regionu, którego należy użyć. Zmienia to działanie mapy w zależności od kraju lub terytorium.

  • solutionChannel: Google Maps Platform udostępnia wiele typów przykładowego kodu, który ułatwia szybkie rozpoczęcie pracy. Aby śledzić wykorzystanie bardziej złożonych przykładów kodu i poprawić jakość rozwiązań, Google uwzględnia w przykładowym kodzie parametr zapytania solution_channel w wywołaniach interfejsu API.

  • authReferrerPolicy: klienci korzystający z tej usługi mogą konfigurować w Cloud Console ograniczenia dotyczące stron odsyłających HTTP, aby ograniczyć listę adresów URL, które mogą używać danego klucza interfejsu API. Domyślnie te ograniczenia mogą być skonfigurowane tak, aby klucz interfejsu API mógł być używany tylko w niektórych ścieżkach. Jeśli jakikolwiek adres URL w tej samej domenie lub źródle może używać klucza interfejsu API, możesz ustawić authReferrerPolicy: "origin" tak, by ograniczyć ilość danych wysyłanych podczas autoryzowania żądań z interfejsu Maps JavaScript API. Jeśli ten parametr jest określony, a w Cloud Console włączone są ograniczenia dotyczące stron odsyłających HTTP, interfejs Maps JavaScript API może wczytać się tylko wtedy, gdy istnieje ograniczenie strony odsyłającej HTTP pasujące do domeny bieżącej witryny bez określonej ścieżki.