react gmaps utils

React-Gmaps-Utils

React-GMaps-Utils ist eine React-Bibliothek, die Komponenten und Hooks zur Integration von Google Maps-Funktionalität in Ihre React-Anwendungen bietet.

Installation

Sie können React-GMaps-Utils mit NPM installieren:

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

Verwendung

GooglemapsProvider

Die GoogleMapsProvider -Komponente wird verwendet, um das Google Maps -Skript zu laden und einen Kontext für andere Komponenten bereitzustellen, um auf die Google Maps -API zuzugreifen.

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

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

Karte

Die Map macht eine Google -Karte und bietet verschiedene Anpassungsoptionen.

 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

Die Marker fügt der Karte an einer bestimmten Position einen Marker hinzu.

 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 >
  )
}

Automatisch vervollständigt

Die Autocomplete Komponente bietet ein Eingangsfeld mit automatischer Funktionalität für Orte.

 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 >
  )
}

Die Komponente hat auch einen shouldFetch , den Sie übergeben können, um zu verhindern, dass die automatische Vervollständigung Vorschläge abzieht. Beispiel Usecase könnte sein, wenn Sie den Abruf nur dann auftreten möchten, wenn eine Benutzerinteraktion vorliegt.

ReversegeoCodeByLocation

Die ReverseGeocodeByLocation -Komponente führt die Reverse -Geocoding basierend auf einem angegebenen Speicherort durch.

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

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

MapeVent

Die MapEvent -Komponente hört für Ereignisse auf der Karte und führt eine Rückruffunktion aus, wenn das Ereignis ausgelöst wird.

 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 >
  )
} 

Benutzerdefinierte Haken

UsecurrentPosition

Der useCurrentPosition -Hook ruft die aktuelle Position des Benutzers ab.

 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 >
  )
} 

Notiz

Diese Bibliothek erfordert einen API -Schlüssel von Google Maps. Stellen Sie sicher, dass Sie "YOUR_API_KEY" durch Ihre tatsächliche API -Taste in der GoogleMapsProvider -Komponente ersetzen.

Lizenz

MIT © Abdelrahman146