react gmaps utils

رد فعل GMAPS-utils

React-Gmaps-Utils هي مكتبة React التي توفر مكونات وخطافات لدمج وظائف خرائط Google في تطبيقات React الخاصة بك.

تثبيت

يمكنك تثبيت React-Gmaps-Utils باستخدام NPM:

npm install react-gmaps-utils
npm install --save-dev @types/google.maps

الاستخدام

Googlemapsprovider

يتم استخدام مكون GoogleMapsProvider لتحميل البرنامج النصي خرائط Google وتوفير سياق للمكونات الأخرى للوصول إلى واجهة برمجة تطبيقات خرائط Google.

 import { GoogleMapsProvider } from 'react-gmaps-utils'

function App ( ) {
  return (
    < GoogleMapsProvider apiKey = 'YOUR_API_KEY' >
      { /* Your application components */ }
    </ GoogleMapsProvider >
  )
}

رسم خريطة

يقوم مكون Map بإعداد خريطة Google ويوفر خيارات مختلفة للتخصيص.

 import { Map } from 'react-gmaps-utils'

function MyMap ( ) {
  return (
    < Map
      options = { {
        center : { lat : 37.7749 , lng : - 122.4194 } ,
        zoom : 10
      } }
    >
      { /* Optional child components */ }
    </ Map >
  )
}

علامة

يضيف مكون Marker علامة إلى الخريطة في موضع محدد.

 import { Map } from 'react-gmaps-utils'

function MyMapWithMarker ( ) {
  return (
    < Map
      options = { {
        center : { lat : 37.7749 , lng : - 122.4194 } ,
        zoom : 10
      } }
    >
      < Map . Marker position = { { lat : 37.7749 , lng : - 122.4194 } } />
    </ Map >
  )
}

الإكمال التلقائي

يوفر المكون Autocomplete حقل إدخال مع وظيفة الإكمال التلقائي للأماكن.

 import { Places , Autocomplete } from 'react-gmaps-utils'
import { useMemo , useRef , useState } from 'react'

function MyAutocomplete ( ) {
  const [ query , setQuery ] = useState ( '' )
  const autocompleteRef = useRef < { close : ( ) => void } > ( null )
  const placesService = useRef < google . maps . places . PlacesService | null > ( null )
  const [ placeId , setPlaceId ] = useState < string | null > ( null ) ;
  return (
    < Places
      onLoaded = { ( places ) => {
        placesService . current = places
      } }
    >
      < Autocomplete
        as = { CustomInput }
        ref = { autocompleteRef }
        value = { query }
        onChange = { ( e : React . ChangeEvent < HTMLInputElement > ) =>
          setQuery ( e . target . value )
        }
        options = { { types : [ '(cities)' ] } }
        className = 'input'
        renderResult = { ( predictions ) => {
          return (
            < div className = 'dropdown' >
              { predictions . map ( ( prediction ) => (
                < div
                  className = 'dropdown-item'
                  key = { prediction . place_id }
                  onClick = { ( ) => {
                    setPlaceId ( prediction . place_id )
                    autocompleteRef . current ?. close ( )
                  } }
                >
                  < span > { prediction . description } </ span >
                </ div >
              ) ) }
            </ div >
          )
        } }
      />
      < Places . FindPlaceByPlaceId placeId = { placeId } onPlaceReceived = { ( place ) => { console . log ( place ?. geometry ?. location ?. toJSON ( ) ) } } />
    </ Places >
  )
}

shouldFetch على المكون أيضًا أن يكون من هذا المنطق الذي يمكنك نقله لمنع الإكمال التلقائي من اقتراحات جلب. مثال يمكن أن يكون usecase إذا كنت تريد إجراء الجلب فقط إذا كان هناك تفاعل مستخدم.

REVERSEGODEBYLOCATION

يقوم مكون ReverseGeocodeByLocation بتنفيذ الترميز الجغرافي العكسي بناءً على موقع محدد.

 import { ReverseGeocodeByLocation } from 'react-gmaps-utils'

function MyReverseGeocoder ( ) {
  return (
    < ReverseGeocodeByLocation
      position = { { lat : 37.7749 , lng : - 122.4194 } }
      onAddressReceived = { ( result ) => console . log ( result ) }
    />
  )
}

mapevent

يستمع مكون MapEvent للأحداث الموجودة على الخريطة وتنفيذ وظيفة رد الاتصال عند تشغيل الحدث.

 import { MapEvent } from 'react-gmaps-utils'

function MyMapEvent ( ) {
  const handleMapClick = ( map , event ) => {
    console . log ( 'Map clicked at:' , event . latLng . lat ( ) , event . latLng . lng ( ) )
  }

  return (
    < Map
      options = { {
        center : { lat : 37.7749 , lng : - 122.4194 } ,
        zoom : 10
      } }
    >
      < Map . Event event = 'click' callback = { handleMapClick } />
    </ Map >
  )
} 

السنانير المخصصة

usecurrentposition

يسترجع خطاف useCurrentPosition الموضع الحالي للمستخدم.

 import { useCurrentPosition } from 'react-gmaps-utils'

function MyComponent ( ) {
  const { position , loading , error , getCurrentPosition , getIPBasedPosition } = useCurrentPosition ( {
    onInit : {
      getPosition : true ,
      ipBased : true ,
    }
  } )

  if ( loading ) return < div > Loading... </ div >
  if ( error ) return < div > Error: { error } </ div >

  return (
    < div >
      Latitude: { position ?. lat }
      < br />
      Longitude: { position ?. lng }
      < br />
      < button onClick = { getCurrentPosition } > Get Exact Location </ button >
    </ div >
  )
} 

ملحوظة

تتطلب هذه المكتبة مفتاح API من خرائط Google. تأكد من استبدال "YOUR_API_KEY" باستخدام مفتاح API الفعلي في مكون GoogleMapsProvider .

رخصة

MIT © Abdelrahman146