Chức năng tham chiếu 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 Show
Sự tiếp kiếnTà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ớiCá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, Úc
thử mẫuStackblitz. 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 ý
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 HTML5Chú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 MapsAPI 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 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 độngGó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 3
Thuộc tính thẻ tập lệnhLư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
thư việnKhi 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ộ APITrong 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ố 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 MapsBản đồ các phần tử DOMlet 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
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ướiConstructorDescription 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
Khóa API và lỗi thanh toánTrong 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ố 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
Dành cho nhà phát triển web
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. Có, tôi đang sử dụng khóa APITuyệ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
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ôiTruy 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ôiTuyệ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 ở đó
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 |