google map react

رد فعل خريطة جوجل ·

google-map-react هو مكون مكتوب عبر مجموعة صغيرة من واجهة برمجة تطبيقات خرائط Google. يسمح لك بعرض أي مكون من مكونات React على خريطة Google. إنه متماثل تمامًا ويمكن عرضه على الخادم. بالإضافة إلى ذلك، يمكنه عرض مكونات الخريطة في المتصفح حتى إذا لم يتم تحميل Google Maps API. يستخدم خوارزمية تحويم داخلية قابلة للتعديل - يمكن تحريك كل كائن على الخريطة.

يتيح لك إنشاء واجهات مثل هذا المثال (يمكنك تمرير الجدول، وتكبير/تصغير/تحريك الخريطة، والتمرير/النقر على العلامات، والنقر على صفوف الجدول)

ابدء

في الحالة البسيطة، تحتاج فقط إلى إضافة دعائم lat و lng إلى أي مكون تابع لمكون GoogleMapReact .

شاهده أثناء العمل في jsbin

 import React from "react" ;
import GoogleMapReact from 'google-map-react' ;

const AnyReactComponent = ( { text } ) => < div > { text } < / div > ;

export default function SimpleMap ( ) {
  const defaultProps = {
    center : {
      lat : 10.99835602 ,
      lng : 77.01502627
    } ,
    zoom : 11
  } ;

  return (
    // Important! Always set the container height explicitly
    < div style = { { height : '100vh' , width : '100%' } } >
      < GoogleMapReact
        bootstrapURLKeys = { { key : "" } }
        defaultCenter = { defaultProps . center }
        defaultZoom = { defaultProps . zoom }
      >
        < AnyReactComponent
          lat = { 59.955413 }
          lng = { 30.337844 }
          text = "My Marker"
        / >
      < / GoogleMapReact >
    < / div >
  ) ;
}

خريطتي لا تظهر!

• تأكد من أن عنصر الحاوية له العرض والارتفاع. ستحاول الخريطة ملء الحاوية الأصلية، ولكن إذا لم يكن للحاوية حجم، فسوف تنهار الخريطة إلى 0 عرض / ارتفاع. هذا ليس من متطلبات Google-map-react، بل هو متطلب لخرائط Google بشكل عام.

تثبيت

npm:

 npm install --save google-map-react

غزل:

 yarn add google-map-react

سمات

يعمل مع المكونات الخاصة بك

بدلاً من علامات خرائط Google الافتراضية والبالونات ومكونات الخريطة الأخرى، يمكنك عرض مكونات التفاعل المتحركة الرائعة على الخريطة.

تقديم متماثل

ويعرض على الخادم. (مرحبًا بمحركات البحث) (يمكنك تعطيل جافا سكريبت في أدوات تطوير المتصفح، وإعادة تحميل أي صفحة نموذجية لترى كيف تعمل)

يتم حساب مواضع المكونات بشكل مستقل عن Google Maps API

فهو يعرض المكونات على الخريطة قبل (وحتى بدون) تحميل Google Maps API.

يتم تحميل API لخرائط Google عند الطلب

ليست هناك حاجة لوضع علامة <script src= في أعلى الصفحة. يتم تحميل واجهة برمجة تطبيقات خرائط Google عند الاستخدام الأول لمكون GoogleMapReact .

استخدم واجهة برمجة تطبيقات خرائط Google

يمكنك الوصول إلى map خرائط Google وكائنات maps باستخدام onGoogleApiLoaded ، وفي هذه الحالة ستحتاج إلى تعيين yesIWantToUseGoogleMapApiInternals على true

...

const handleApiLoaded = ( map , maps ) => {
  // use map and maps objects
} ;

...

< GoogleMapReact
  bootstrapURLKeys = { { key : /* YOUR KEY HERE */ } }
  defaultCenter = { this . props . center }
  defaultZoom = { this . props . zoom }
  yesIWantToUseGoogleMapApiInternals
  onGoogleApiLoaded = { ( { map , maps } ) => handleApiLoaded ( map , maps ) }
>
  < AnyReactComponent
    lat = { 59.955413 }
    lng = { 30.337844 }
    text = "My Marker"
  / >
< / GoogleMapReact >

توقيت المحيط الهادئ: تذكر تعيين yesIWantToUseGoogleMapApiInternals على القيمة true.

مثال هنا

خوارزمية التحويم الداخلية

الآن يمكن تحريك كل كائن على الخريطة (ومع ذلك، لا يزال بإمكانك استخدام محددات التمرير في CSS إذا كنت تريد ذلك). إذا حاولت التصغير هنا على سبيل المثال، فسيظل بإمكانك التمرير فوق كل علامة خريطة تقريبًا.

أمثلة

• وضع مكونات التفاعل على الخريطة: بسيط (المصدر)

• خيارات الخريطة المخصصة: مثال (المصدر)

• تأثيرات التحويم: تمرير بسيط (مصدر)؛ المسافة تحوم (المصدر)

• أحداث GoogleMap: مثال (المصدر)

• مثال المشروع: الرئيسي (المصدر)؛ بالدرداش (نفس المصدر الرئيسي)

• مثال على التجميع باستخدام الخطافات ( جديد : المصدر، المقالة) التجميع مع الخطافات

• مثال التجميع (المصدر) google-map-clustering-example

• كيفية عرض آلاف العلامات ( جديد : المصدر) google-map-thousands-markers

• أمثلة: أمثلة أمثلة قديمة

• مثال jsbin مثال jsbin

• أمثلة على مستندات webpackbin ( جديدة ) مع أمثلة على webpackbin (قيد التقدم)

• تطوير المثال المحلي (جديد) تطوير المثال

التوثيق

يمكنك العثور على الوثائق هنا:

• مرجع واجهة برمجة التطبيقات

• المستندات الجديدة (قيد التقدم)

يساهم

يتم تقسيم التنمية المحلية إلى قسمين (من الأفضل استخدام علامتي تبويب).

أولاً، قم بتشغيل مجموعة التحديثات لمشاهدة src/ الوحدة النمطية الخاصة بك وإعادة ترجمتها تلقائيًا إلى dist/ كلما قمت بإجراء تغييرات.

npm start # runs rollup with watch flag

سيقوم الجزء الثاني بتشغيل example/ create-react-app المرتبط بالإصدار المحلي من وحدتك.

 # (in another tab)
cd example
npm start # runs create-react-app dev server

الآن، في أي وقت تقوم فيه بإجراء تغيير على مكتبتك في src/ أو على example/src الخاص بالتطبيق، سيقوم create-react-app بإعادة تحميل خادم التطوير المحلي الخاص بك مباشرة حتى تتمكن من التكرار على المكون الخاص بك في الوقت الفعلي.

تثبيت الارتباط اليدوي

إذا ظهرت لك رسالة الخطأ Module not found: Can't resolve 'google-react-map'... أثناء محاولة تشغيل التطبيق النموذجي، فأنت بحاجة إلى ربط وحدة التطوير المحلية يدويًا، وجرب الخطوات التالية:

1. في المجلد الجذر:

npm link

2. انتقل إلى example/ و(بعد تثبيت التبعيات الأخرى) قم بتنفيذ:

npm link google-map-react

رخصة

معهد ماساتشوستس للتكنولوجيا

القضايا المعروفة

• ستحتاج المتصفحات الأقدم (http://caniuse.com/#feat=promises) إلى ملف ES6 Promise polyfill حتى تعمل.

!!! نحن نبحث عن المساهمين

نحن نبحث بنشاط عن المساهمين، يرجى إرسال رسالة إلى المالك أو أي من المتعاونين.