Đặt tên hàm javascript

Maps JavaScript API cho phép bạn tùy chỉnh bản đồ với nội dung và hình ảnh của riêng bạn để hiển thị trên các trang web và thiết bị di động. API JavaScript của Maps có bốn loại bản đồ cơ bản (lộ trình, vệ tinh, kết hợp và địa hình) mà bạn có thể sửa đổi bằng cách sử dụng các lớp và kiểu, điều khiển và sự kiện cũng như các dịch vụ và thư viện khác nhau

Sự tiếp kiến

Tài liệu này được thiết kế cho những người quen thuộc với lập trình JavaScript và các khái niệm lập trình hướng đối tượng. Bạn cũng nên làm quen với Google Maps từ quan điểm của người dùng. Có rất nhiều hướng dẫn JavaScript có sẵn trên Web

Tài liệu khái niệm này được thiết kế để cho phép bạn nhanh chóng bắt đầu khám phá và phát triển các ứng dụng bằng API JavaScript của Maps. Chúng tôi cũng xuất bản Tham chiếu API JavaScript của Maps

Chào thế giới

Cách dễ nhất để bắt đầu tìm hiểu về Maps JavaScript API là xem một ví dụ đơn giản. Ví dụ sau hiển thị một bản đồ có trung tâm là Sydney, New South Wales, Australia

bản đánh máy

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
Lưu ý. Đọc hướng dẫn sử dụng TypeScript và Google Maps

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
Ghi chú. JavaScript được biên dịch từ đoạn mã TypeScript

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

HTML

<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

Xem ví dụ

thử mẫu

Stackblitz. com Mã Sandbox. io JSFiddle. mạng GitPod. io Google Cloud Shell

Ngay cả trong ví dụ đơn giản này, có một vài điều cần lưu ý

  1. Chúng tôi khai báo ứng dụng là HTML5 bằng cách sử dụng khai báo
    let map;
    
    function initMap() {
      map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
      });
    }
    
    window.initMap = initMap;
    7
  2. Chúng tôi tạo một phần tử
    let map;
    
    function initMap() {
      map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
      });
    }
    
    window.initMap = initMap;
    8 tên là "bản đồ" để giữ bản đồ
  3. Chúng tôi định nghĩa một hàm JavaScript để tạo bản đồ trong
    let map;
    
    function initMap() {
      map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
      });
    }
    
    window.initMap = initMap;
    8
  4. Chúng tôi tải API JavaScript của Maps bằng cách sử dụng thẻ
    /* 
     * Always set the map height explicitly to define the size of the div element
     * that contains the map. 
     */
    #map {
      height: 100%;
    }
    
    /* 
     * Optional: Makes the sample page fill the window. 
     */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    0

Các bước này được giải thích dưới đây

Khai báo ứng dụng của bạn dưới dạng HTML5

Chúng tôi khuyên bạn nên khai báo một

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
1 đúng trong ứng dụng web của mình. Trong các ví dụ ở đây, chúng tôi đã khai báo các ứng dụng của mình là HTML5 bằng cách sử dụng HTML5
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
1 đơn giản như được hiển thị bên dưới

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
0

Hầu hết các trình duyệt hiện tại sẽ hiển thị nội dung được khai báo với

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
1 này ở "chế độ tiêu chuẩn", điều đó có nghĩa là ứng dụng của bạn sẽ tuân thủ nhiều trình duyệt hơn.
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
1 cũng được thiết kế để xuống cấp một cách duyên dáng;

Lưu ý rằng một số CSS hoạt động trong chế độ quirks không hợp lệ trong chế độ tiêu chuẩn. Cụ thể, tất cả các kích thước dựa trên tỷ lệ phần trăm phải kế thừa từ các phần tử khối gốc và nếu bất kỳ tổ tiên nào trong số đó không chỉ định kích thước, thì chúng được coi là có kích thước 0 x 0 pixel. Vì lý do đó, chúng tôi đưa vào khai báo

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
5 sau

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
4

Tuyên bố CSS này chỉ ra rằng vùng chứa bản đồ

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
6 (với id
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
7) sẽ chiếm 100% chiều cao của phần thân HTML. Lưu ý rằng chúng tôi cũng phải khai báo cụ thể các tỷ lệ phần trăm đó cho
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
8 và
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
9

Đang tải API JavaScript của Maps

API JavaScript của Maps được tải bằng cách sử dụng thẻ
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
0, thẻ này có thể được thêm nội tuyến vào tệp HTML của bạn hoặc tự động sử dụng tệp JavaScript riêng. Chúng tôi khuyên bạn nên xem lại cả hai phương pháp và chọn phương pháp phù hợp nhất với cách cấu trúc mã trong dự án của bạn

Tải nội tuyến

Để tải nội tuyến API JavaScript của Maps trong tệp HTML, hãy thêm thẻ

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
0 như hiển thị bên dưới

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
1

Tải động

Để tải động nội tuyến API JavaScript của Maps bằng tệp JavaScript riêng, hãy xem ví dụ bên dưới. Cách tiếp cận này cho phép bạn xử lý tất cả mã của mình để làm việc với API từ một tệp

<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
2 riêng biệt và tương đương với việc thêm nội tuyến thẻ tập lệnh

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
3

Tải động

Gói @googlemaps/js-api-loader có sẵn để tạo trải nghiệm tải động liền mạch hơn. Nó có thể được cài đặt thông qua NPM với những điều sau đây

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
4

Gói này có thể được nhập vào ứng dụng với

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
5

Trình tải hiển thị giao diện Lời hứa và gọi lại. Phần sau minh họa cách sử dụng phương thức Promise mặc định

<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
3

bản đánh máy

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
0Ghi chú. Đọc hướng dẫn sử dụng TypeScript và Google Maps

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
1

Thuộc tính thẻ tập lệnh

Lưu ý trong các ví dụ trên rằng một số thuộc tính được đặt trên thẻ

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
0, được khuyến nghị. Sau đây là phần giải thích của từng thuộc tính

  • <html>
      <head>
        <title>Simple Map</title>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
      </head>
      <body>
        <div id="map"></div>
    
        <!-- 
         The `defer` attribute causes the callback to execute after the full HTML
         document has been parsed. For non-blocking uses, avoiding race conditions,
         and consistent behavior across browsers, consider loading using Promises
         with https://www.npmjs.com/package/@googlemaps/js-api-loader.
        -->
        <script
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
          defer
        ></script>
      </body>
    </html>
    5. URL nơi API JavaScript của Maps được tải từ đó, bao gồm tất cả các ký hiệu và định nghĩa bạn cần để sử dụng API JavaScript của Maps. URL trong ví dụ này có hai tham số.
    <html>
      <head>
        <title>Simple Map</title>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
      </head>
      <body>
        <div id="map"></div>
    
        <!-- 
         The `defer` attribute causes the callback to execute after the full HTML
         document has been parsed. For non-blocking uses, avoiding race conditions,
         and consistent behavior across browsers, consider loading using Promises
         with https://www.npmjs.com/package/@googlemaps/js-api-loader.
        -->
        <script
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
          defer
        ></script>
      </body>
    </html>
    6, nơi bạn cung cấp khóa API của mình và
    <html>
      <head>
        <title>Simple Map</title>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
      </head>
      <body>
        <div id="map"></div>
    
        <!-- 
         The `defer` attribute causes the callback to execute after the full HTML
         document has been parsed. For non-blocking uses, avoiding race conditions,
         and consistent behavior across browsers, consider loading using Promises
         with https://www.npmjs.com/package/@googlemaps/js-api-loader.
        -->
        <script
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
          defer
        ></script>
      </body>
    </html>
    7, nơi bạn chỉ định tên của chức năng chung sẽ được gọi sau khi API JavaScript của Maps tải hoàn toàn. Đọc thêm về tham số URL
  • <html>
      <head>
        <title>Simple Map</title>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
      </head>
      <body>
        <div id="map"></div>
    
        <!-- 
         The `defer` attribute causes the callback to execute after the full HTML
         document has been parsed. For non-blocking uses, avoiding race conditions,
         and consistent behavior across browsers, consider loading using Promises
         with https://www.npmjs.com/package/@googlemaps/js-api-loader.
        -->
        <script
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
          defer
        ></script>
      </body>
    </html>
    8. Yêu cầu trình duyệt tải xuống và thực thi tập lệnh không đồng bộ. Khi tập lệnh được thực thi, nó sẽ gọi hàm được chỉ định bằng tham số
    <html>
      <head>
        <title>Simple Map</title>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
      </head>
      <body>
        <div id="map"></div>
    
        <!-- 
         The `defer` attribute causes the callback to execute after the full HTML
         document has been parsed. For non-blocking uses, avoiding race conditions,
         and consistent behavior across browsers, consider loading using Promises
         with https://www.npmjs.com/package/@googlemaps/js-api-loader.
        -->
        <script
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
          defer
        ></script>
      </body>
    </html>
    7

thư viện

Khi tải API JavaScript của Maps qua URL, bạn có thể tùy ý tải các thư viện bổ sung thông qua việc sử dụng tham số URL

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
00. Thư viện là các mô-đun mã cung cấp chức năng bổ sung cho API JavaScript chính của Maps nhưng không được tải trừ khi bạn yêu cầu chúng một cách cụ thể. Để biết thêm thông tin, hãy xem Thư viện trong Maps JavaScript API

Tải đồng bộ API

Trong thẻ

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
0 tải API JavaScript của Maps, có thể bỏ qua thuộc tính
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
02 và tham số
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
7. Điều này sẽ khiến quá trình tải API bị chặn cho đến khi API được tải xuống

Điều này có thể sẽ làm chậm quá trình tải trang của bạn. Nhưng điều đó có nghĩa là bạn có thể viết các thẻ tập lệnh tiếp theo với giả định rằng API đã được tải

Quan trọng. Tham khảo hướng dẫn Chính sách bảo mật nội dung để tìm hiểu thêm về cách định cấu hình CSP cho API JavaScript của Maps

Bản đồ các phần tử DOM

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
2

Để bản đồ hiển thị trên một trang web, chúng tôi phải dành một chỗ cho nó. Thông thường, chúng tôi thực hiện việc này bằng cách tạo một phần tử có tên là

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
8 và lấy một tham chiếu đến phần tử này trong mô hình đối tượng tài liệu (DOM) của trình duyệt

Trong ví dụ trên, chúng tôi đã sử dụng CSS để đặt chiều cao của div bản đồ thành "100%". Điều này sẽ mở rộng để phù hợp với kích thước trên thiết bị di động. Bạn có thể cần điều chỉnh giá trị chiều rộng và chiều cao dựa trên kích thước màn hình và phần đệm của trình duyệt. Lưu ý rằng các div thường lấy chiều rộng của chúng từ phần tử chứa chúng và các div trống thường có chiều cao bằng 0. Vì lý do này, bạn phải luôn đặt chiều cao trên

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
6 một cách rõ ràng

Tùy chọn bản đồ

Có hai tùy chọn bắt buộc cho mọi bản đồ.

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
06 và
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
07

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
3

Mức thu phóng

Độ phân giải ban đầu để hiển thị bản đồ được đặt bởi thuộc tính

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
07, trong đó thu phóng
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
09 tương ứng với bản đồ Trái đất được thu nhỏ hoàn toàn và các mức thu phóng lớn hơn sẽ phóng to ở độ phân giải cao hơn

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
4

Cung cấp một bản đồ toàn bộ Trái đất dưới dạng một hình ảnh sẽ yêu cầu một bản đồ lớn hoặc một bản đồ nhỏ với độ phân giải rất thấp. Do đó, hình ảnh bản đồ trong Google Maps và API JavaScript của Maps được chia thành các "ô" bản đồ và "mức thu phóng. "" Ở mức thu phóng thấp, một tập hợp nhỏ các ô bản đồ bao phủ một khu vực rộng; ở các mức thu phóng cao hơn, các ô có độ phân giải cao hơn và bao phủ một khu vực nhỏ hơn. Danh sách sau đây hiển thị mức độ chi tiết gần đúng mà bạn có thể thấy ở mỗi mức thu phóng

  • 1. Thế giới
  • 5. Đất đai / lục địa
  • 10. Thành phố
  • 15. đường phố
  • 20. Các tòa nhà

Ba hình ảnh sau phản ánh cùng một vị trí của Tokyo ở các mức thu phóng 0, 7 và 18

Để biết thông tin về cách API JavaScript của Maps tải các ô xếp dựa trên mức thu phóng hiện tại, hãy xem hướng dẫn về tọa độ bản đồ và ô xếp

đối tượng bản đồ

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
5

Lớp JavaScript đại diện cho bản đồ là lớp

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
40. Các đối tượng của lớp này xác định một bản đồ trên một trang. (Bạn có thể tạo nhiều hơn một thể hiện của lớp này — mỗi đối tượng sẽ xác định một bản đồ riêng trên trang. ) Chúng tôi tạo một phiên bản mới của lớp này bằng cách sử dụng toán tử JavaScript
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
41

Khi bạn tạo một phiên bản bản đồ mới, bạn chỉ định một phần tử HTML

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
6 trong trang làm vùng chứa cho bản đồ. Các nút HTML là con của đối tượng JavaScript
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
43 và chúng tôi có được tham chiếu đến phần tử này thông qua phương thức
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
44

Mã này xác định một biến (có tên là

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
7) và gán biến đó cho một đối tượng
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
40 mới. Hàm
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
47 được biết đến như một hàm tạo và định nghĩa của nó được hiển thị bên dưới

ConstructorDescription
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;
48Tạo một bản đồ mới bên trong vùng chứa HTML nhất định — thường là phần tử DIV — sử dụng bất kỳ tham số (tùy chọn) nào được truyền

Xử lý sự cố

Lời nhắc nhở. Để sử dụng API JavaScript của Maps
  • Tất cả các yêu cầu API JavaScript của Maps phải bao gồm khóa API;
  • Bạn phải kích hoạt thanh toán trên từng dự án của mình

Khóa API và lỗi thanh toán

Trong một số trường hợp nhất định, bản đồ tối hoặc hình ảnh Chế độ xem phố 'âm bản', được đánh dấu chìm bằng văn bản "chỉ dành cho mục đích phát triển", có thể được hiển thị. Hành vi này thường chỉ ra các vấn đề với khóa API hoặc thanh toán. Để sử dụng các sản phẩm của Google Maps Platform, thanh toán phải được bật trên tài khoản của bạn và tất cả các yêu cầu phải bao gồm khóa API hợp lệ. Quy trình sau đây sẽ giúp khắc phục sự cố này

Bạn có đang sử dụng khóa API không?

tôi không chắc. Làm cách nào để kiểm tra xem tôi có đang sử dụng khóa API không?

Khóa API được chuyển dưới dạng tham số

<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
6 trong URL được sử dụng để tải API JavaScript của Maps. Dưới đây là một số tùy chọn để kiểm tra xem bạn có đang sử dụng khóa API hay không

  • Sử dụng tiện ích mở rộng Trình kiểm tra API nền tảng Google Maps của Chrome. Điều này cho phép bạn xác định xem trang web của mình có đang triển khai đúng API Maps được cấp phép của Google hay không
  • Nếu bạn đang sử dụng thư viện hoặc plugin để tải API JavaScript của Maps, hãy kiểm tra cài đặt cho thư viện đó và tìm tùy chọn khóa API
  • Kiểm tra lỗi trong trình duyệt của bạn. Nếu bạn thấy các thông báo sau, nghĩa là bạn đang sử dụng khóa API không đúng cách
    • Cảnh báo API JavaScript của Google Maps. Không có phím Api
    • Lỗi API JavaScript của Google Maps. MissingKeyMapError

Dành cho nhà phát triển web

  • Nếu bạn có quyền truy cập vào mã nguồn của ứng dụng của mình, hãy tìm thẻ
    /* 
     * Always set the map height explicitly to define the size of the div element
     * that contains the map. 
     */
    #map {
      height: 100%;
    }
    
    /* 
     * Optional: Makes the sample page fill the window. 
     */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    10 được sử dụng để tải API JavaScript của Maps. Khi tải API JavaScript của Maps, hãy thay thế
    /* 
     * Always set the map height explicitly to define the size of the div element
     * that contains the map. 
     */
    #map {
      height: 100%;
    }
    
    /* 
     * Optional: Makes the sample page fill the window. 
     */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    11 trong mã bên dưới bằng khóa API của bạn.
    let map;
    
    function initMap() {
      map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
      });
    }
    
    window.initMap = initMap;
    6
  • Kiểm tra lưu lượng truy cập mạng được tạo bởi trang web của bạn trong trình duyệt. Trong Chrome, điều này có thể được xem bằng tab Mạng DevTools. Tại đây bạn sẽ thấy các yêu cầu mạng được thực hiện bởi trang web của bạn. Các yêu cầu được thực hiện bằng API JavaScript của Maps sẽ nằm trong đường dẫn
    /* 
     * Always set the map height explicitly to define the size of the div element
     * that contains the map. 
     */
    #map {
      height: 100%;
    }
    
    /* 
     * Optional: Makes the sample page fill the window. 
     */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    12. Tại đây, bạn có thể xác nhận xem các yêu cầu có đang sử dụng tham số
    <html>
      <head>
        <title>Simple Map</title>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
      </head>
      <body>
        <div id="map"></div>
    
        <!-- 
         The `defer` attribute causes the callback to execute after the full HTML
         document has been parsed. For non-blocking uses, avoiding race conditions,
         and consistent behavior across browsers, consider loading using Promises
         with https://www.npmjs.com/package/@googlemaps/js-api-loader.
        -->
        <script
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
          defer
        ></script>
      </body>
    </html>
    6 hay không. Có thể hữu ích khi lọc lưu lượng truy cập mạng của bạn theo
    /* 
     * Always set the map height explicitly to define the size of the div element
     * that contains the map. 
     */
    #map {
      height: 100%;
    }
    
    /* 
     * Optional: Makes the sample page fill the window. 
     */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    12 khi xem tab Mạng

Không, tôi không sử dụng khóa API

Để nhận khóa API, hãy nhấp vào nút bên dưới. Nếu bạn không thấy hướng dẫn thiết lập, hãy làm theo hướng dẫn đầy đủ tại Bắt đầu với Google Maps Platform.
Bắt đầu

Có, tôi đang sử dụng khóa API

Tuyệt quá. Hãy tiếp tục và kiểm tra xem tài khoản thanh toán có được đính kèm với dự án của bạn không

Tài khoản thanh toán có được đính kèm với dự án của bạn không?

tôi không chắc. Làm cách nào để kiểm tra xem tài khoản thanh toán có được đính kèm với dự án của tôi không?

Truy cập trang Thanh toán trong Google Cloud Console và chọn dự án mà khóa API của bạn đã được tạo. Để xác nhận khóa được liên kết với dự án

  1. Chuyển đến phần Thông tin xác thực, bạn có thể truy cập phần này từ thanh bên trái trong Nền tảng Google Maps > Thông tin xác thực
  2. Kiểm tra xem khóa API bạn hiện đang sử dụng trên trang web của mình có được liệt kê không. Nếu không phải như vậy, hãy chuyển sang một dự án khác và kiểm tra thông tin đăng nhập ở đó
  3. Nếu bạn không thể định vị dự án cho khóa API của mình, bạn có thể đã mất quyền truy cập vào dự án này. Yêu cầu những người khác trong tổ chức của bạn giúp đỡ. Nếu dự án ban đầu không thể được định vị, bạn nên
    1. Tạo một dự án mới. Điều này có thể được thực hiện bằng cách chọn Dự án mới từ danh sách dự án hoặc bằng cách chọn Tạo dự án qua trang Trình quản lý tài nguyên
    2. Tạo khóa API mới. Điều này có thể được thực hiện trên trang Thông tin xác thực. Sau đó, nhấp vào Tạo thông tin đăng nhập và sau đó chọn khóa API

Khi bạn đã định vị dự án của mình trong Bảng điều khiển đám mây, hãy kiểm tra xem tài khoản thanh toán có được đính kèm hay không bằng cách điều hướng đến phần Thanh toán trong menu bên trái

Không, tài khoản thanh toán không được đính kèm với dự án của tôi

Truy cập trang Bật thanh toán trong Bảng điều khiển đám mây và thêm tài khoản thanh toán vào dự án của bạn. Để biết thêm thông tin, hãy xem Bắt đầu với Google Maps Platform

Có, tài khoản thanh toán được đính kèm với dự án của tôi

Tuyệt quá. Hãy đảm bảo rằng phương thức thanh toán được cung cấp là hợp lệ

Có phải phương thức thanh toán được cung cấp không còn hợp lệ (ví dụ: thẻ tín dụng đã hết hạn)?

Bạn có thể thêm, xóa hoặc cập nhật phương thức thanh toán trong Cloud Console

Có vượt quá giới hạn hàng ngày tự đặt ra đối với API không?

Nếu bạn đã đặt giới hạn hàng ngày cho bất kỳ API nào của mình, điều này thường dùng để ngăn các mức tăng không mong muốn, thì bạn có thể giải quyết vấn đề này bằng cách tăng giới hạn hàng ngày của mình

Bạn có thể kiểm tra giới hạn hàng ngày của mình bằng cách truy cập Bảng điều khiển dịch vụ và API trong Bảng điều khiển đám mây. Khi ở đó

  1. Chọn một dự án nếu được nhắc
  2. Chọn một API từ danh sách, sau đó nhấp vào tab Hạn ngạch

Khóa API của bạn có giới hạn địa chỉ IP không?

Các khóa API có giới hạn địa chỉ IP chỉ có thể được sử dụng với các dịch vụ web dành cho việc sử dụng từ phía máy chủ (chẳng hạn như API mã hóa địa lý và các API dịch vụ web khác). Hầu hết các dịch vụ web này đều có các dịch vụ tương đương trong API JavaScript của Maps (ví dụ: xem Dịch vụ mã hóa địa lý). Để sử dụng các dịch vụ phía máy khách API JavaScript của Maps, bạn sẽ cần tạo một khóa API riêng. Khóa này có thể được bảo mật bằng giới hạn liên kết giới thiệu HTTP (xem Nhận, thêm và hạn chế khóa API)

Nếu mã của bạn không hoạt động

Để giúp bạn thiết lập và chạy mã bản đồ của mình, Brendan Kenny và Mano Marks chỉ ra một số lỗi phổ biến và cách khắc phục chúng trong video này