Sân chơi javascript với tự động hoàn thành

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

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;
index.ts

let map;

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

window.initMap = initMap;
index.js

/* 
 * 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;
}
style.css

  
    
    

    
    
  
  
    


    
    
  
index.html

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;
   index.js

   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;
   index.js

   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;
   index.js

   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;
   }
   style.css

   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;
}
style.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;
}
style.css

let map;

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

window.initMap = initMap;
index.js

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;
}
style.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;
}
style.css

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;
}
style.css

let map;

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

window.initMap = initMap;
index.js

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;
}
style.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;
}
style.css
Có thể bạn quan tâm
Hội nghị kinh doanh tại Hoa Kỳ 2023 với thư mời
Cách hiển thị dữ liệu biểu mẫu trong bảng bằng JavaScript
Bạn có thể đặt javascript trong php không?
Khoa học dữ liệu ứng dụng với chuyên môn Python Coursera
Chuyển đổi chuỗi thành int trong mảng python

/* 
 * 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;
}
style.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;
}
style.css

Đang tải API JavaScript của Maps

/* 
 * 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;
}
style.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;
}
style.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;
}
style.css

  
    
    

    
    
  
  
    


    
    
  
index.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;
}
style.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;
}
style.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;
}
style.css

  
    
    

    
    
  
  
    


    
    
  
index.html

let map;

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

window.initMap = initMap;
index.js

let map;

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

window.initMap = initMap;
index.js

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;
}
style.css

• 
    
      
      
  
      
      
    
    
      
  
  
      
      
    
  index.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ố.

  
    
      
      
  
      
      
    
    
      
  
  
      
      
    
  index.html

  6, nơi bạn cung cấp khóa API của mình và

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

• 
    
      
      
  
      
      
    
    
      
  
  
      
      
    
  index.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ố

  
    
      
      
  
      
      
    
    
      
  
  
      
      
    
  index.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;
index.js

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;
}
style.css

let map;

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

window.initMap = initMap;
index.js

  
    
    

    
    
  
  
    


    
    
  
index.html

Đ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

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;
index.js

Để 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;
index.js

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;
}
style.css

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;
index.js

let map;

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

window.initMap = initMap;
index.js

let map;

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

window.initMap = initMap;
index.js

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;
index.js

let map;

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

window.initMap = initMap;
index.js

let map;

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

window.initMap = initMap;
index.js

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;
index.js

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;
index.js

let map;

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

window.initMap = initMap;
index.js

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;
}
style.css

let map;

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

window.initMap = initMap;
index.js

let map;

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

window.initMap = initMap;
index.js

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;
}
style.css

let map;

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

window.initMap = initMap;
index.js

let map;

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

window.initMap = initMap;
index.js

let map;

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

window.initMap = initMap;
index.js

Xử lý sự cố

• 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

  
    
    

    
    
  
  
    


    
    
  
index.html

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