Bắt đầu

Nhà phát triển ở Khu vực kinh tế Châu Âu (EEA)

Trang này hướng dẫn bạn cách lấy khoá API, bật các API bắt buộc và tải Thư viện địa điểm để bạn có thể làm việc với lớp Địa điểm.

Lấy khoá API và bật các API bắt buộc

Trước khi sử dụng lớp Địa điểm, bạn cần:

  • Tạo dự án trên Cloud bằng tài khoản thanh toán.
  • Lấy khoá API.
  • Bật các API sau:
    • API JavaScript cho Maps
    • Places API
    • Places API (Mới) (bắt buộc để sử dụng tính năng Tìm kiếm bằng văn bản (Mới) và Tự động hoàn thành địa điểm)

Để tìm hiểu thêm, hãy xem bài viết Thiết lập dự án trên Google Cloud.

Lấy khoá API

Bật Places API (Mới)

Tải Thư viện địa điểm

Để tải Thư viện địa điểm, trước tiên, hãy tải Maps JavaScript API bằng cách thêm trình tải khởi động cùng dòng vào mã ứng dụng, như minh hoạ trong đoạn mã 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>

Tiếp theo, hãy sử dụng toán tử await để gọi importLibrary() từ bên trong hàm async, như minh hoạ dưới đây:

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

Hàm của bạn cũng có thể tải thư viện mà không cần khai báo biến cho các lớp cần thiết:

  async function initMap() {
    google.maps.importLibrary("places");
    ...
  }

  initMap();

Ngoài ra, bạn có thể tải trực tiếp các thư viện trong HTML như minh hoạ dưới đây:

  <script>
  google.maps.importLibrary("places");
  </script>

Để biết thêm thông tin về cách tải thư viện, hãy xem phần Tải API Maps JavaScript.

Các bước tiếp theo