開放原始碼資料庫

有許多開放原始碼程式庫都能為 Maps JavaScript API 提供額外功能。這些程式庫是在 GitHub 上進行版本管理,並發布至 NPM

網頁元件

使用 Maps JavaScript API 網頁元件,即可在網站中快速加入地圖功能。網頁元件包含樣板程式碼、最佳做法和回應式設計,可將複雜的地圖 UI 簡化為單一 HTML 元素。

Google 地圖平台擴充元件程式庫是一組網頁元件,可協助開發人員更快速、輕鬆地製作出色的地圖。

npm i @googlemaps/extended-component-library

載入 API

現代化的網頁應用程式可能適合使用下列程式庫載入 Maps JavaScript API。

使用 Promise 動態載入 Maps JavaScript API。

npm i @googlemaps/js-api-loader

使用 TypeScript

TypeScript 使用者可以開始使用下列套件。詳情請參閱 TypeScript 使用指南

Maps JavaScript API 的 TypeScript 類型

npm i -D @types/google.maps

用於縮小聯合類型範圍的 TypeScript 防護。

npm i -D @googlemaps/typescript-guards

使用 React

React 使用者可以開始使用下列套件。

透過宣告方式載入 Maps JavaScript API 的包裝函式元件。

npm i @googlemaps/react-wrapper

這些元件和掛鉤可將 Maps JavaScript API 整合到 React 應用程式中。

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

擴充標記和疊加層

下列程式庫會擴充類別,例如 Marker 和 OverlayView。

針對大量標記建立和管理各縮放等級的叢集。

npm i @googlemaps/markerclusterer

根據地圖可視區域變更來新增和移除標記。

npm i @googlemaps/markermanager

在地圖中加入開放地理空間協會 (OGC) 圖層,例如網頁地圖服務 (WMS)。

npm i @googlemaps/ogc

在標記中加入自訂 HTML 標籤。

npm i @googlemaps/markerwithlabel

使用 WebGL 和 ThreeJS 來實現高效能視覺化。

npm i @googlemaps/three

使用 Deck.gl 做為自訂 Google 地圖疊加層。

npm i @deck.gl/google-maps

測試與程式碼檢查

使用這些程式庫來確保符合最佳做法,以及簡化 Maps JavaScript API 測試。

使用自訂 ESLint 規則檢查程式碼。

npm i -D eslint-plugin-googlemaps

與 Jest 測試程式庫搭配使用的模擬。

npm i -D @googlemaps/jest-mocks

Node.js 程式庫

可用於從 Cloud Functions 或伺服器端程式碼發出呼叫的 Node.js 用戶端程式庫。

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

在 Node.js 中編碼和解碼折線。

npm i @googlemaps/polyline-codec

在 Node.js 中簽署網址,以提高安全性。

npm i @googlemaps/url-signature