مكتبات برامج مفتوحة المصدر

يتوفر العديد من المكتبات مفتوحة المصدر لتوفير إمكانيات إضافية واجهة برمجة تطبيقات JavaScript للخرائط. يتم تحديد إصدارات هذه المكتبات في GitHub وتم نشرها في npm.

مكونات الويب

استخدام واجهة برمجة تطبيقات JavaScript للخرائط على الويب المكونات لإضافة الخرائط بسرعة الوظائف إلى مواقع الويب لديك. تتضمن مكونات الويب التعليمة البرمجية النموذجية، وأفضل الممارسات والتصميم سريع الاستجابة، ومن ثمَّ تقليل واجهة مستخدم الخرائط المعقدة إلى بفعالية عنصر HTML واحد.

المكوِّن الموسع لمنصة خرائط Google المكتبة هي مجموعة من مكونات الويب التي تساعد مطوري البرامج في إنشاء خرائط أفضل بشكل أسرع وبجهد أقل.

npm i @googlemaps/extended-component-library
إصدار NPM لـ @googlemaps/extended-component-library تنزيلات NPM لـ @googlemaps/extended-component-library نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord

جارٍ تحميل واجهة برمجة التطبيقات

قد تستفيد تطبيقات الويب الحديثة من استخدام المكتبات التالية لتحميل واجهة برمجة تطبيقات JavaScript للخرائط.

تحميل واجهة برمجة تطبيقات JavaScript للخرائط بشكل ديناميكي مع Promises

npm i @googlemaps/js-api-loader
إصدار NPM لـ @googlemaps/js-api-loader عمليات تنزيل NPM لـ @googlemaps/js-api-loader نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord

استخدام TypeScript

يمكن لمستخدمي TypeScript البدء باستخدام الحزم التالية. راجِع استخدام دليل TypeScript للحصول على معلومات إضافية.

أنواع TypeScript لواجهة برمجة تطبيقات JavaScript للخرائط

npm i -D @types/google.maps
إصدار NPM لـ @types/google.maps عمليات تنزيل NPM لـ @types/google.maps نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord

يحمي TypeScript أنواع الاتحاد الضيقة.

npm i -D @googlemaps/typescript-guards
إصدار NPM لـ @googlemaps/typescript-guards عمليات تنزيل NPM لـ @googlemaps/typescript-guards نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord

استخدام React

يمكن لمستخدمي React البدء باستخدام الحزم التالية.

مكونات وعناصر الجذب لدمج Maps JavaScript API في تطبيقات React.

npm i -D @vis.gl/react-google-maps
إصدار NPM لـ @vis.gl/react-google-maps عمليات تنزيل NPM لـ @vis.gl/react-google-maps نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord

مكوّن برنامج تضمين لتحميل واجهة برمجة تطبيقات JavaScript للخرائط بشكل صريح.

npm i @googlemaps/react-wrapper
إصدار NPM لـ @googlemaps/react-wrapper عمليات تنزيل NPM لـ @googlemaps/react-wrapper نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord

توسيع العلامات والتراكبات

تقوم المكتبات التالية بتوسيع الفئات مثل Marker وOverlayView.

تنشئ المجموعات العنقودية على مستوى التكبير/التصغير وتديرها لكمية كبيرة من العلامات.

npm i @googlemaps/markerclusterer
إصدار NPM لـ @googlemaps/markerclusterer عمليات تنزيل NPM لـ @googlemaps/markerclusterer نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord

لإضافة العلامات وإزالتها بناءً على التغييرات في إطار عرض الخريطة.

npm i @googlemaps/markermanager
إصدار NPM لـ @googlemaps/markermanager عمليات تنزيل NPM لـ @googlemaps/markermanager نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord

أضف طبقات الاتحاد الجغرافي المكاني المفتوح (OGC) مثل خدمة خريطة الويب (WMS) إلى الخريطة.

npm i @googlemaps/ogc
إصدار NPM لـ @googlemaps/ogc عمليات تنزيل NPM لـ @googlemaps/ogc نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord

إضافة تصنيفات HTML مخصصة إلى العلامات.

npm i @googlemaps/markerwithlabel
إصدار NPM لـ @googlemaps/markerwithlabel عمليات تنزيل NPM لـ @googlemaps/markerwithlabel نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord

استخدام WebGL وThreeJS لعرض مرئيات عالية الأداء

npm i @googlemaps/three
إصدار NPM لـ @googlemaps/three عمليات تنزيل NPM لـ @googlemaps/three نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord

استخدم Deck.gl كتراكب مخصص في خرائط Google.

npm i @deck.gl/google-maps
إصدار NPM لـ @deck.gl/google-maps عمليات تنزيل NPM لـ @deck.gl/google-maps نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord

الاختبار واستخدام أداة Lint

استخدم هذه المكتبات لضمان أفضل الممارسات وتسهيل عملية الاختبار لـ Maps JavaScript API.

يمكنك استخدام قواعد ESLint المخصّصة لإضافة النص البرمجي إلى نص برمجي.

npm i -D eslint-plugin-googlemaps
إصدار NPM لـ eslint-plugin-googlemaps عمليات تنزيل NPM لـ eslint-plugin-googlemaps نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord

نماذج يتم استخدامها مع مكتبة اختبارات Jest.

npm i -D @googlemaps/jest-mocks
إصدار NPM لـ @googlemaps/jest-mocks عمليات تنزيل NPM لـ @googlemaps/jest-mocks نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord

مكتبات Node.js

مكتبة برامج Node.js لإجراء الطلبات من دوال السحابة أو رمز من جهة الخادم.

npm i @googlemaps/google-maps-services-js
إصدار NPM لـ @googlemaps/google-maps-services-js عمليات تنزيل NPM لـ @googlemaps/google-maps-services-js نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord

ترميز الخطوط المتعددة وفك ترميزها في Node.js.

npm i @googlemaps/polyline-codec
إصدار NPM لـ @googlemaps/polyline-codec عمليات تنزيل NPM لـ @googlemaps/polyline-codec نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord

سجِّل عناوين URL في Node.js لمزيد من الأمان.

npm i @googlemaps/url-signature
إصدار NPM لـ @googlemaps/url-signature عمليات تنزيل NPM لـ @googlemaps/url-signature نجوم GitHub Repo نشاط الالتزام في GitHub (فرع) شوكة GitHub شارة خادم Discord