Thư viện

Để tải mã JavaScript cho API JavaScript cho Maps, bạn bao gồm tập lệnh trình tải bootstrap trên trang của bạn, có dạng sau:

<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",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Chiến lược phát hành đĩa đơn API JavaScript của Maps được tạo thành từ thư viện không được tải cho đến khi bạn yêu cầu cụ thể. Việc chia nhỏ các thành phần thành thư viện cho phép API để tải (và phân tích cú pháp) một cách nhanh chóng. Bạn chỉ phải chịu thêm chi phí tải và phân tích cú pháp thư viện khi bạn cần.

Tải thêm thư viện trong thời gian chạy bằng cách sử dụng toán tử await để gọi importLibrary() trong hàm async. Ví dụ:

const { Map } = await google.maps.importLibrary("maps");

Ví dụ về mã sau đây cho thấy cách tải cả thư viện Map và AdvancedMarkerElement:

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

Thư viện để nhập thư viện động

Bạn có thể sử dụng các thư viện sau với Nhập thư viện động:

Thư viện cho URL tự khởi động (cũ)

Các thư viện sau được hỗ trợ để sử dụng với thẻ tập lệnh Tự động khởi động cũ:
  • drawing cung cấp giao diện đồ hoạ để người dùng vẽ đa giác, hình chữ nhật, hình nhiều đường, hình tròn và điểm đánh dấu trên bản đồ. Tham khảo ý kiến thời gian Bản vẽ tài liệu về thư viện để biết thêm thông tin.
  • geometry bao gồm các hàm hiệu dụng để tính toán giá trị hình học vô hướng (như khoảng cách và diện tích) trên bề mặt trái đất. Hãy tham khảo Hình học tài liệu về thư viện để biết thêm thông tin.
  • journeySharing cung cấp dịch vụ hỗ trợ cho Nền tảng Google Maps Giao thông vận tải và kho vận.
  • localContext hiển thị cho người dùng các địa điểm quan tâm chính gần một vị trí mà bạn chỉ định. Hãy tham khảo Bối cảnh địa phương tài liệu về thư viện để biết thêm thông tin.
  • marker cho phép bạn thêm Điểm đánh dấu nâng cao có khả năng tuỳ chỉnh cao và có hiệu suất cao vào Maps. Tham khảo tài liệu về Điểm đánh dấu nâng cao để biết thêm thông tin.
  • places cho phép ứng dụng của bạn tìm kiếm các địa điểm như như cơ sở, vị trí địa lý hoặc địa điểm ưa thích nổi bật, trong khu vực xác định. Hãy tham khảo Thư viện địa điểm để biết thêm thông tin.
  • visualization cung cấp bản đồ nhiệt để biểu diễn trực quan . Hãy tham khảo Hình ảnh trực quan tài liệu về thư viện để biết thêm thông tin.

Yêu cầu tự thân khởi nghiệp sau đây minh hoạ cách thêm một yêu cầu cho thuộc tính Thư viện google.maps.geometry của Maps JavaScript API sang phiên bản cũ tập lệnh của trình tải khởi động:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry&callback=initMap">
</script>

Để yêu cầu nhiều thư viện, hãy phân tách các thư viện đó bằng dấu phẩy:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry,places&callback=initMap">
</script>