Thư viện nguồn mở

Nhiều thư viện nguồn mở có sẵn để cung cấp thêm các chức năng cho API JavaScript của Maps. Các thư viện này được tạo phiên bản trên GitHub và xuất bản lên npm.

Thành phần web

Sử dụng Thành phần web của Maps JavaScript API để nhanh chóng thêm chức năng bản đồ vào trang web của bạn. Thành phần web đóng gói mã nguyên mẫu, các phương pháp hay nhất và thiết kế đáp ứng, giúp giảm giao diện người dùng bản đồ phức tạp thành một phần tử HTML duy nhất.

Thư viện thành phần mở rộng của Google Maps Platform là một tập hợp các Thành phần web giúp nhà phát triển xây dựng bản đồ tốt hơn, nhanh hơn và tốn ít công sức hơn.

npm i @googlemaps/extended-component-library

Đang tải API

Các ứng dụng web hiện đại có thể hưởng lợi từ việc sử dụng các thư viện sau để tải Maps JavaScript API.

Tải động Maps JavaScript API bằng Promise.

npm i @googlemaps/js-api-loader

Sử dụng TypeScript

Người dùng TypeScript có thể bắt đầu bằng các gói sau. Hãy xem hướng dẫn sử dụng TypeScript để biết thêm thông tin.

Các loại TypeScript cho Maps JavaScript API

npm i -D @types/google.maps

TypeScript bảo vệ để thu hẹp các loại hợp nhất.

npm i -D @googlemaps/typescript-guards

Sử dụng React

Người dùng React có thể bắt đầu bằng các gói sau.

Các thành phần và hook để tích hợp Maps JavaScript API vào các ứng dụng React.

npm i -D @vis.gl/react-google-maps

Thành phần trình bao bọc để tải Maps JavaScript API theo cách khai báo.

npm i @googlemaps/react-wrapper

Mở rộng điểm đánh dấu và lớp phủ

Các thư viện sau đây mở rộng các lớp như Marker và OverlayView.

Tạo và quản lý các cụm theo mức thu phóng cho số lượng lớn điểm đánh dấu.

npm i @googlemaps/markerclusterer

Thêm và xoá điểm đánh dấu dựa trên các thay đổi về khung nhìn bản đồ.

npm i @googlemaps/markermanager

Thêm các lớp Open Geospatial Consortium (OGC) như Dịch vụ bản đồ web (WMS) vào bản đồ.

npm i @googlemaps/ogc

Thêm nhãn HTML tuỳ chỉnh vào điểm đánh dấu.

npm i @googlemaps/markerwithlabel

Sử dụng WebGL và ThreeJS để có hình ảnh trực quan hiệu suất cao.

npm i @googlemaps/three

Sử dụng Deck.gl làm lớp phủ bản đồ tuỳ chỉnh trên Google Maps.

npm i @deck.gl/google-maps

Kiểm thử và tìm lỗi mã nguồn

Hãy sử dụng các thư viện này để đảm bảo áp dụng các phương pháp hay nhất và giúp việc thử nghiệm Maps JavaScript API trở nên dễ dàng hơn.

Sử dụng các quy tắc ESLint tuỳ chỉnh để tìm lỗi mã nguồn.

npm i -D eslint-plugin-googlemaps

Mô phỏng để sử dụng với thư viện kiểm thử Jest.

npm i -D @googlemaps/jest-mocks

Thư viện Node.js

Thư viện ứng dụng Node.js để thực hiện lệnh gọi từ Cloud Functions hoặc mã phía máy chủ.

npm i @googlemaps/google-maps-services-js

Mã hoá và giải mã hình nhiều đường trong Node.js.

npm i @googlemaps/polyline-codec

Ký URL trong Node.js để tăng cường bảo mật.

npm i @googlemaps/url-signature